@vuu-ui/vuu-filters 0.8.0-debug → 0.8.1-debug

package/esm/index.js

@@ -548,268 +548,510 @@ var RangeFilter = ({
   ] });
 };
 
-// ../vuu-data-react/src/hooks/useDataSource.ts
-import { getFullRange, metadataKeys, WindowRange } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-var { SELECTED } = metadataKeys;
-
-// ../vuu-data-react/src/hooks/useServerConnectionStatus.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-import { ConnectionManager } from "@vuu-ui/vuu-data";
-
-// ../vuu-data-react/src/hooks/useServerConnectionQuality.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
-import { ConnectionManager as ConnectionManager2 } from "@vuu-ui/vuu-data";
-
-// ../vuu-data-react/src/hooks/useTypeaheadSuggestions.ts
-import { useCallback as useCallback4 } from "react";
-import { makeRpcCall } from "@vuu-ui/vuu-data";
-var TYPEAHEAD_MESSAGE_CONSTANTS = {
-  type: "RPC_CALL",
-  service: "TypeAheadRpcHandler"
-};
-var getTypeaheadParams = (table, column, text = "", selectedValues = []) => {
-  if (text !== "" && !selectedValues.includes(text.toLowerCase())) {
-    return [table, column, text];
-  }
-  return [table, column];
-};
-var useTypeaheadSuggestions = () => {
-  const getTypeaheadSuggestions = useCallback4(
-    async (params) => {
-      const rpcMessage = params.length === 2 ? {
-        method: "getUniqueFieldValues",
-        params,
-        ...TYPEAHEAD_MESSAGE_CONSTANTS
-      } : {
-        method: "getUniqueFieldValuesStartingWith",
-        params,
-        ...TYPEAHEAD_MESSAGE_CONSTANTS
-      };
-      const suggestions = await makeRpcCall(rpcMessage);
-      return suggestions;
+// src/column-filter/TypeaheadFilter.tsx
+import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
+import { ComboBoxDeprecated } from "@heswell/salt-lab";
+import { useCallback, useEffect, useState } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TypeaheadFilter = ({
+  defaultTypeaheadParams,
+  filterValues = [],
+  onChange: onFilterChange
+}) => {
+  const [tableName, columnName] = defaultTypeaheadParams;
+  const [searchValue, setSearchValue] = useState("");
+  const [typeaheadValues, setTypeaheadValues] = useState([]);
+  const getSuggestions = useTypeaheadSuggestions();
+  useEffect(() => {
+    const params = searchValue ? [tableName, columnName, searchValue] : defaultTypeaheadParams;
+    let isSubscribed = true;
+    getSuggestions(params).then((options) => {
+      if (!isSubscribed) {
+        return;
+      }
+      if (isStartsWithValue(filterValues[0])) {
+        options.unshift(filterValues[0]);
+      }
+      if (searchValue) {
+        options.unshift(`${searchValue}...`);
+      }
+      options.concat(filterValues);
+      setTypeaheadValues(options);
+    });
+    return () => {
+      isSubscribed = false;
+    };
+  }, [
+    filterValues,
+    searchValue,
+    columnName,
+    tableName,
+    getSuggestions,
+    defaultTypeaheadParams
+  ]);
+  const onInputChange = useCallback(
+    (evt) => {
+      const value = evt.target.value;
+      setSearchValue(value);
     },
     []
   );
-  return getTypeaheadSuggestions;
+  const onSelectionChange = useCallback(
+    (_evt, selected) => {
+      setSearchValue("");
+      if (selected === null)
+        return;
+      if (selected.some(isStartsWithValue)) {
+        selected = selected.filter(isStartsWithValue).slice(-1);
+      }
+      const filter = getTypeaheadFilter(
+        columnName,
+        selected,
+        isStartsWithValue(selected[0])
+      );
+      onFilterChange(selected, filter);
+    },
+    [columnName, onFilterChange]
+  );
+  return /* @__PURE__ */ jsx4(
+    ComboBoxDeprecated,
+    {
+      multiSelect: true,
+      onInputChange,
+      onChange: onSelectionChange,
+      source: typeaheadValues,
+      style: { minWidth: 200 },
+      inputValue: searchValue,
+      selectedItem: filterValues
+    },
+    columnName
+  );
 };
 
-// ../../node_modules/@lezer/common/dist/index.js
-var DefaultBufferLength = 1024;
-var nextPropID = 0;
-var Range = class {
-  constructor(from, to) {
-    this.from = from;
-    this.to = to;
-  }
-};
-var NodeProp = class {
-  /// Create a new node prop type.
-  constructor(config = {}) {
-    this.id = nextPropID++;
-    this.perNode = !!config.perNode;
-    this.deserialize = config.deserialize || (() => {
-      throw new Error("This node type doesn't define a deserialize function");
-    });
-  }
-  /// This is meant to be used with
-  /// [`NodeSet.extend`](#common.NodeSet.extend) or
-  /// [`LRParser.configure`](#lr.ParserConfig.props) to compute
-  /// prop values for each node type in the set. Takes a [match
-  /// object](#common.NodeType^match) or function that returns undefined
-  /// if the node type doesn't get this prop, and the prop's value if
-  /// it does.
-  add(match) {
-    if (this.perNode)
-      throw new RangeError("Can't add per-node props to node types");
-    if (typeof match != "function")
-      match = NodeType.match(match);
-    return (type) => {
-      let result = match(type);
-      return result === void 0 ? null : [this, result];
-    };
-  }
-};
-NodeProp.closedBy = new NodeProp({ deserialize: (str) => str.split(" ") });
-NodeProp.openedBy = new NodeProp({ deserialize: (str) => str.split(" ") });
-NodeProp.group = new NodeProp({ deserialize: (str) => str.split(" ") });
-NodeProp.contextHash = new NodeProp({ perNode: true });
-NodeProp.lookAhead = new NodeProp({ perNode: true });
-NodeProp.mounted = new NodeProp({ perNode: true });
-var noProps = /* @__PURE__ */ Object.create(null);
-var NodeType = class {
-  /// @internal
-  constructor(name, props, id, flags = 0) {
-    this.name = name;
-    this.props = props;
-    this.id = id;
-    this.flags = flags;
-  }
-  /// Define a node type.
-  static define(spec) {
-    let props = spec.props && spec.props.length ? /* @__PURE__ */ Object.create(null) : noProps;
-    let flags = (spec.top ? 1 : 0) | (spec.skipped ? 2 : 0) | (spec.error ? 4 : 0) | (spec.name == null ? 8 : 0);
-    let type = new NodeType(spec.name || "", props, spec.id, flags);
-    if (spec.props)
-      for (let src of spec.props) {
-        if (!Array.isArray(src))
-          src = src(type);
-        if (src) {
-          if (src[0].perNode)
-            throw new RangeError("Can't store a per-node prop on a node type");
-          props[src[0].id] = src[1];
-        }
-      }
-    return type;
-  }
-  /// Retrieves a node prop for this type. Will return `undefined` if
-  /// the prop isn't present on this node.
-  prop(prop) {
-    return this.props[prop.id];
-  }
-  /// True when this is the top node of a grammar.
-  get isTop() {
-    return (this.flags & 1) > 0;
-  }
-  /// True when this node is produced by a skip rule.
-  get isSkipped() {
-    return (this.flags & 2) > 0;
-  }
-  /// Indicates whether this is an error node.
-  get isError() {
-    return (this.flags & 4) > 0;
-  }
-  /// When true, this node type doesn't correspond to a user-declared
-  /// named node, for example because it is used to cache repetition.
-  get isAnonymous() {
-    return (this.flags & 8) > 0;
-  }
-  /// Returns true when this node's name or one of its
-  /// [groups](#common.NodeProp^group) matches the given string.
-  is(name) {
-    if (typeof name == "string") {
-      if (this.name == name)
-        return true;
-      let group = this.prop(NodeProp.group);
-      return group ? group.indexOf(name) > -1 : false;
-    }
-    return this.id == name;
-  }
-  /// Create a function from node types to arbitrary values by
-  /// specifying an object whose property names are node or
-  /// [group](#common.NodeProp^group) names. Often useful with
-  /// [`NodeProp.add`](#common.NodeProp.add). You can put multiple
-  /// names, separated by spaces, in a single property name to map
-  /// multiple node names to a single value.
-  static match(map) {
-    let direct = /* @__PURE__ */ Object.create(null);
-    for (let prop in map)
-      for (let name of prop.split(" "))
-        direct[name] = map[prop];
-    return (node) => {
-      for (let groups = node.prop(NodeProp.group), i = -1; i < (groups ? groups.length : 0); i++) {
-        let found = direct[i < 0 ? node.name : groups[i]];
-        if (found)
-          return found;
-      }
-    };
-  }
+// src/column-filter/ColumnListItem.tsx
+import { memo } from "react";
+import {
+  Highlighter,
+  ListItem
+} from "@heswell/salt-lab";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ColumnListItem = (props) => {
+  return /* @__PURE__ */ jsx5(MemoColumnItem, { ...props });
 };
-NodeType.none = new NodeType(
-  "",
-  /* @__PURE__ */ Object.create(null),
-  0,
-  8
-  /* NodeFlag.Anonymous */
-);
-var NodeSet = class {
-  /// Create a set with the given types. The `id` property of each
-  /// type should correspond to its position within the array.
-  constructor(types) {
-    this.types = types;
-    for (let i = 0; i < types.length; i++)
-      if (types[i].id != i)
-        throw new RangeError("Node type ids should correspond to array positions when creating a node set");
-  }
-  /// Create a copy of this set with some node properties added. The
-  /// arguments to this method can be created with
-  /// [`NodeProp.add`](#common.NodeProp.add).
-  extend(...props) {
-    let newTypes = [];
-    for (let type of this.types) {
-      let newProps = null;
-      for (let source of props) {
-        let add = source(type);
-        if (add) {
-          if (!newProps)
-            newProps = Object.assign({}, type.props);
-          newProps[add[0].id] = add[1];
-        }
-      }
-      newTypes.push(newProps ? new NodeType(type.name, newProps, type.id, type.flags) : type);
+var MemoColumnItem = memo(function MemoizedItem({
+  item,
+  itemTextHighlightPattern,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx5(ListItem, { ...restProps, children: /* @__PURE__ */ jsx5("span", { style: { marginLeft: 10 }, children: /* @__PURE__ */ jsx5(
+    Highlighter,
+    {
+      matchPattern: itemTextHighlightPattern,
+      text: item == null ? void 0 : item.name
     }
-    return new NodeSet(newTypes);
-  }
-};
-var CachedNode = /* @__PURE__ */ new WeakMap();
-var CachedInnerNode = /* @__PURE__ */ new WeakMap();
-var IterMode;
-(function(IterMode2) {
-  IterMode2[IterMode2["ExcludeBuffers"] = 1] = "ExcludeBuffers";
-  IterMode2[IterMode2["IncludeAnonymous"] = 2] = "IncludeAnonymous";
-  IterMode2[IterMode2["IgnoreMounts"] = 4] = "IgnoreMounts";
-  IterMode2[IterMode2["IgnoreOverlays"] = 8] = "IgnoreOverlays";
-})(IterMode || (IterMode = {}));
-var Tree = class {
-  /// Construct a new tree. See also [`Tree.build`](#common.Tree^build).
-  constructor(type, children, positions, length, props) {
-    this.type = type;
-    this.children = children;
-    this.positions = positions;
-    this.length = length;
-    this.props = null;
-    if (props && props.length) {
-      this.props = /* @__PURE__ */ Object.create(null);
-      for (let [prop, value] of props)
-        this.props[typeof prop == "number" ? prop : prop.id] = value;
+  ) }) });
+});
+
+// src/column-filter/useColumnFilterStore.ts
+import { filterAsQuery as filterAsQuery2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback2, useState as useState2 } from "react";
+var addOrReplace = (array, newValue, key) => array.filter((oldValue) => oldValue[key] !== newValue[key]).concat(newValue);
+var useColumnFilterStore = (onFilterSubmit) => {
+  var _a, _b;
+  const [selectedColumnName, setSelectedColumnName] = useState2("");
+  const [savedFilters, setSavedFilters] = useState2([]);
+  const [rangeValues, setRangeValues] = useState2([]);
+  const [typeaheadValues, setTypeaheadValues] = useState2([]);
+  const clear = () => {
+    setSelectedColumnName("");
+    setRangeValues([]);
+    setTypeaheadValues([]);
+    setSavedFilters([]);
+    onFilterSubmit({ filter: "" });
+  };
+  const updateFilters = useCallback2(
+    (newFilter) => {
+      const newSavedFilters = addOrReplace(
+        savedFilters,
+        { column: selectedColumnName, filter: newFilter },
+        "column"
+      );
+      setSavedFilters(newSavedFilters);
+      const combinedFilter = newSavedFilters.map((x) => x.filter).reduce((prev, filter) => {
+        if (filter === void 0)
+          return prev;
+        return addFilter(prev, filter, { combineWith: AND });
+      }, void 0);
+      const query = combinedFilter === void 0 ? "" : filterAsQuery2(combinedFilter);
+      onFilterSubmit({ filter: query, filterStruct: combinedFilter });
+    },
+    [selectedColumnName, onFilterSubmit, savedFilters]
+  );
+  const onTypeaheadChange = useCallback2(
+    (newValues, newFilter) => {
+      setTypeaheadValues(
+        addOrReplace(
+          typeaheadValues,
+          { column: selectedColumnName, value: newValues },
+          "column"
+        )
+      );
+      updateFilters(newFilter);
+    },
+    [selectedColumnName, typeaheadValues, updateFilters]
+  );
+  const onRangeChange = useCallback2(
+    (newValues, newFilter) => {
+      setRangeValues(
+        addOrReplace(
+          rangeValues,
+          { column: selectedColumnName, value: newValues },
+          "column"
+        )
+      );
+      updateFilters(newFilter);
+    },
+    [selectedColumnName, rangeValues, updateFilters]
+  );
+  const onSelectedColumnChange = useCallback2(
+    (column) => setSelectedColumnName((column == null ? void 0 : column.name) || ""),
+    []
+  );
+  const rangeValue = (_a = rangeValues.filter(
+    (v) => v.column === selectedColumnName
+  )[0]) == null ? void 0 : _a.value;
+  const typeaheadValue = (_b = typeaheadValues.filter(
+    (v) => v.column === selectedColumnName
+  )[0]) == null ? void 0 : _b.value;
+  return {
+    clear,
+    selectedColumnName,
+    rangeValue,
+    typeaheadValue,
+    onSelectedColumnChange,
+    onRangeChange,
+    onTypeaheadChange
+  };
+};
+
+// src/column-filter/ColumnFilter.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var ColumnFilter = ({
+  className,
+  table,
+  columns,
+  onFilterSubmit,
+  ...htmlAttributes
+}) => {
+  const {
+    clear,
+    onTypeaheadChange,
+    onRangeChange,
+    onSelectedColumnChange,
+    selectedColumnName,
+    rangeValue,
+    typeaheadValue
+  } = useColumnFilterStore(onFilterSubmit);
+  const getFilterComponent = () => {
+    var _a;
+    const defaultTypeaheadParams = [table, selectedColumnName];
+    const selectedColumnType = (_a = columns.find(
+      (column) => column.name === selectedColumnName
+    )) == null ? void 0 : _a.serverDataType;
+    switch (selectedColumnType) {
+      case "string":
+      case "char":
+        return /* @__PURE__ */ jsx6(
+          ToolbarField2,
+          {
+            label: "Start typing to select a filter",
+            labelPlacement: "top",
+            children: /* @__PURE__ */ jsx6(
+              TypeaheadFilter,
+              {
+                defaultTypeaheadParams,
+                filterValues: typeaheadValue,
+                onChange: onTypeaheadChange
+              }
+            )
+          }
+        );
+      case "int":
+      case "long":
+      case "double":
+        return /* @__PURE__ */ jsx6(ToolbarField2, { label: "Select a range", labelPlacement: "top", children: /* @__PURE__ */ jsx6(
+          RangeFilter,
+          {
+            defaultTypeaheadParams,
+            filterValues: rangeValue,
+            onChange: onRangeChange
+          }
+        ) });
+      default:
+        return /* @__PURE__ */ jsx6(ToolbarField2, { children: /* @__PURE__ */ jsx6(Text, { children: "Data type unsupported" }) });
     }
-  }
-  /// @internal
-  toString() {
-    let mounted = this.prop(NodeProp.mounted);
-    if (mounted && !mounted.overlay)
-      return mounted.tree.toString();
-    let children = "";
-    for (let ch of this.children) {
-      let str = ch.toString();
-      if (str) {
-        if (children)
-          children += ",";
-        children += str;
-      }
+  };
+  return /* @__PURE__ */ jsxs3(
+    Toolbar,
+    {
+      ...htmlAttributes,
+      style: { alignItems: "center", height: "36px" },
+      children: [
+        /* @__PURE__ */ jsx6(
+          ToolbarField2,
+          {
+            label: "Select a column to filter",
+            labelPlacement: "top",
+            style: { width: 180 },
+            children: /* @__PURE__ */ jsx6(
+              Dropdown,
+              {
+                source: columns,
+                ListItem: ColumnListItem,
+                itemToString: (column) => column.name,
+                onSelectionChange: (_evt, column) => onSelectedColumnChange(column)
+              }
+            )
+          }
+        ),
+        selectedColumnName && getFilterComponent(),
+        /* @__PURE__ */ jsx6(ToolbarButton, { onClick: clear, children: /* @__PURE__ */ jsx6(DeleteIcon, {}) })
+      ]
     }
-    return !this.type.name ? children : (/\W/.test(this.type.name) && !this.type.isError ? JSON.stringify(this.type.name) : this.type.name) + (children.length ? "(" + children + ")" : "");
-  }
-  /// Get a [tree cursor](#common.TreeCursor) positioned at the top of
-  /// the tree. Mode can be used to [control](#common.IterMode) which
-  /// nodes the cursor visits.
-  cursor(mode = 0) {
-    return new TreeCursor(this.topNode, mode);
+  );
+};
+
+// src/filter-input/FilterInput.tsx
+import { Button } from "@salt-ds/core";
+
+// src/filter-input/useCodeMirrorEditor.ts
+import {
+  autocompletion,
+  defaultKeymap,
+  EditorState as EditorState2,
+  EditorView as EditorView2,
+  ensureSyntaxTree,
+  keymap,
+  minimalSetup,
+  startCompletion
+} from "@vuu-ui/vuu-codemirror";
+
+// ../../node_modules/@lezer/common/dist/index.js
+var DefaultBufferLength = 1024;
+var nextPropID = 0;
+var Range = class {
+  constructor(from, to) {
+    this.from = from;
+    this.to = to;
   }
-  /// Get a [tree cursor](#common.TreeCursor) pointing into this tree
-  /// at the given position and side (see
-  /// [`moveTo`](#common.TreeCursor.moveTo).
-  cursorAt(pos, side = 0, mode = 0) {
-    let scope = CachedNode.get(this) || this.topNode;
-    let cursor = new TreeCursor(scope);
-    cursor.moveTo(pos, side);
-    CachedNode.set(this, cursor._tree);
-    return cursor;
+};
+var NodeProp = class {
+  /// Create a new node prop type.
+  constructor(config = {}) {
+    this.id = nextPropID++;
+    this.perNode = !!config.perNode;
+    this.deserialize = config.deserialize || (() => {
+      throw new Error("This node type doesn't define a deserialize function");
+    });
   }
-  /// Get a [syntax node](#common.SyntaxNode) object for the top of the
-  /// tree.
-  get topNode() {
-    return new TreeNode(this, 0, 0, null);
+  /// This is meant to be used with
+  /// [`NodeSet.extend`](#common.NodeSet.extend) or
+  /// [`LRParser.configure`](#lr.ParserConfig.props) to compute
+  /// prop values for each node type in the set. Takes a [match
+  /// object](#common.NodeType^match) or function that returns undefined
+  /// if the node type doesn't get this prop, and the prop's value if
+  /// it does.
+  add(match) {
+    if (this.perNode)
+      throw new RangeError("Can't add per-node props to node types");
+    if (typeof match != "function")
+      match = NodeType.match(match);
+    return (type) => {
+      let result = match(type);
+      return result === void 0 ? null : [this, result];
+    };
+  }
+};
+NodeProp.closedBy = new NodeProp({ deserialize: (str) => str.split(" ") });
+NodeProp.openedBy = new NodeProp({ deserialize: (str) => str.split(" ") });
+NodeProp.group = new NodeProp({ deserialize: (str) => str.split(" ") });
+NodeProp.contextHash = new NodeProp({ perNode: true });
+NodeProp.lookAhead = new NodeProp({ perNode: true });
+NodeProp.mounted = new NodeProp({ perNode: true });
+var noProps = /* @__PURE__ */ Object.create(null);
+var NodeType = class {
+  /// @internal
+  constructor(name, props, id, flags = 0) {
+    this.name = name;
+    this.props = props;
+    this.id = id;
+    this.flags = flags;
+  }
+  /// Define a node type.
+  static define(spec) {
+    let props = spec.props && spec.props.length ? /* @__PURE__ */ Object.create(null) : noProps;
+    let flags = (spec.top ? 1 : 0) | (spec.skipped ? 2 : 0) | (spec.error ? 4 : 0) | (spec.name == null ? 8 : 0);
+    let type = new NodeType(spec.name || "", props, spec.id, flags);
+    if (spec.props)
+      for (let src of spec.props) {
+        if (!Array.isArray(src))
+          src = src(type);
+        if (src) {
+          if (src[0].perNode)
+            throw new RangeError("Can't store a per-node prop on a node type");
+          props[src[0].id] = src[1];
+        }
+      }
+    return type;
+  }
+  /// Retrieves a node prop for this type. Will return `undefined` if
+  /// the prop isn't present on this node.
+  prop(prop) {
+    return this.props[prop.id];
+  }
+  /// True when this is the top node of a grammar.
+  get isTop() {
+    return (this.flags & 1) > 0;
+  }
+  /// True when this node is produced by a skip rule.
+  get isSkipped() {
+    return (this.flags & 2) > 0;
+  }
+  /// Indicates whether this is an error node.
+  get isError() {
+    return (this.flags & 4) > 0;
+  }
+  /// When true, this node type doesn't correspond to a user-declared
+  /// named node, for example because it is used to cache repetition.
+  get isAnonymous() {
+    return (this.flags & 8) > 0;
+  }
+  /// Returns true when this node's name or one of its
+  /// [groups](#common.NodeProp^group) matches the given string.
+  is(name) {
+    if (typeof name == "string") {
+      if (this.name == name)
+        return true;
+      let group = this.prop(NodeProp.group);
+      return group ? group.indexOf(name) > -1 : false;
+    }
+    return this.id == name;
+  }
+  /// Create a function from node types to arbitrary values by
+  /// specifying an object whose property names are node or
+  /// [group](#common.NodeProp^group) names. Often useful with
+  /// [`NodeProp.add`](#common.NodeProp.add). You can put multiple
+  /// names, separated by spaces, in a single property name to map
+  /// multiple node names to a single value.
+  static match(map) {
+    let direct = /* @__PURE__ */ Object.create(null);
+    for (let prop in map)
+      for (let name of prop.split(" "))
+        direct[name] = map[prop];
+    return (node) => {
+      for (let groups = node.prop(NodeProp.group), i = -1; i < (groups ? groups.length : 0); i++) {
+        let found = direct[i < 0 ? node.name : groups[i]];
+        if (found)
+          return found;
+      }
+    };
+  }
+};
+NodeType.none = new NodeType(
+  "",
+  /* @__PURE__ */ Object.create(null),
+  0,
+  8
+  /* NodeFlag.Anonymous */
+);
+var NodeSet = class {
+  /// Create a set with the given types. The `id` property of each
+  /// type should correspond to its position within the array.
+  constructor(types) {
+    this.types = types;
+    for (let i = 0; i < types.length; i++)
+      if (types[i].id != i)
+        throw new RangeError("Node type ids should correspond to array positions when creating a node set");
+  }
+  /// Create a copy of this set with some node properties added. The
+  /// arguments to this method can be created with
+  /// [`NodeProp.add`](#common.NodeProp.add).
+  extend(...props) {
+    let newTypes = [];
+    for (let type of this.types) {
+      let newProps = null;
+      for (let source of props) {
+        let add = source(type);
+        if (add) {
+          if (!newProps)
+            newProps = Object.assign({}, type.props);
+          newProps[add[0].id] = add[1];
+        }
+      }
+      newTypes.push(newProps ? new NodeType(type.name, newProps, type.id, type.flags) : type);
+    }
+    return new NodeSet(newTypes);
+  }
+};
+var CachedNode = /* @__PURE__ */ new WeakMap();
+var CachedInnerNode = /* @__PURE__ */ new WeakMap();
+var IterMode;
+(function(IterMode2) {
+  IterMode2[IterMode2["ExcludeBuffers"] = 1] = "ExcludeBuffers";
+  IterMode2[IterMode2["IncludeAnonymous"] = 2] = "IncludeAnonymous";
+  IterMode2[IterMode2["IgnoreMounts"] = 4] = "IgnoreMounts";
+  IterMode2[IterMode2["IgnoreOverlays"] = 8] = "IgnoreOverlays";
+})(IterMode || (IterMode = {}));
+var Tree = class {
+  /// Construct a new tree. See also [`Tree.build`](#common.Tree^build).
+  constructor(type, children, positions, length, props) {
+    this.type = type;
+    this.children = children;
+    this.positions = positions;
+    this.length = length;
+    this.props = null;
+    if (props && props.length) {
+      this.props = /* @__PURE__ */ Object.create(null);
+      for (let [prop, value] of props)
+        this.props[typeof prop == "number" ? prop : prop.id] = value;
+    }
+  }
+  /// @internal
+  toString() {
+    let mounted = this.prop(NodeProp.mounted);
+    if (mounted && !mounted.overlay)
+      return mounted.tree.toString();
+    let children = "";
+    for (let ch of this.children) {
+      let str = ch.toString();
+      if (str) {
+        if (children)
+          children += ",";
+        children += str;
+      }
+    }
+    return !this.type.name ? children : (/\W/.test(this.type.name) && !this.type.isError ? JSON.stringify(this.type.name) : this.type.name) + (children.length ? "(" + children + ")" : "");
+  }
+  /// Get a [tree cursor](#common.TreeCursor) positioned at the top of
+  /// the tree. Mode can be used to [control](#common.IterMode) which
+  /// nodes the cursor visits.
+  cursor(mode = 0) {
+    return new TreeCursor(this.topNode, mode);
+  }
+  /// Get a [tree cursor](#common.TreeCursor) pointing into this tree
+  /// at the given position and side (see
+  /// [`moveTo`](#common.TreeCursor.moveTo).
+  cursorAt(pos, side = 0, mode = 0) {
+    let scope = CachedNode.get(this) || this.topNode;
+    let cursor = new TreeCursor(scope);
+    cursor.moveTo(pos, side);
+    CachedNode.set(this, cursor._tree);
+    return cursor;
+  }
+  /// Get a [syntax node](#common.SyntaxNode) object for the top of the
+  /// tree.
+  get topNode() {
+    return new TreeNode(this, 0, 0, null);
   }
   /// Get the [syntax node](#common.SyntaxNode) at the given position.
   /// If `side` is -1, this will move into nodes that end at the
@@ -2194,26 +2436,58 @@ var Stack = class {
   // be done.
   /// @internal
   forceReduce() {
-    let reduce = this.p.parser.stateSlot(
+    let { parser: parser2 } = this.p;
+    let reduce = parser2.stateSlot(
       this.state,
       5
       /* ParseState.ForcedReduce */
     );
     if ((reduce & 65536) == 0)
       return false;
-    let { parser: parser2 } = this.p;
     if (!parser2.validAction(this.state, reduce)) {
       let depth = reduce >> 19, term = reduce & 65535;
       let target = this.stack.length - depth * 3;
-      if (target < 0 || parser2.getGoto(this.stack[target], term, false) < 0)
-        return false;
-      this.storeNode(0, this.reducePos, this.reducePos, 4, true);
+      if (target < 0 || parser2.getGoto(this.stack[target], term, false) < 0) {
+        let backup = this.findForcedReduction();
+        if (backup == null)
+          return false;
+        reduce = backup;
+      }
+      this.storeNode(0, this.pos, this.pos, 4, true);
       this.score -= 100;
     }
     this.reducePos = this.pos;
     this.reduce(reduce);
     return true;
   }
+  /// Try to scan through the automaton to find some kind of reduction
+  /// that can be applied. Used when the regular ForcedReduce field
+  /// isn't a valid action. @internal
+  findForcedReduction() {
+    let { parser: parser2 } = this.p, seen = [];
+    let explore = (state, depth) => {
+      if (seen.includes(state))
+        return;
+      seen.push(state);
+      return parser2.allActions(state, (action) => {
+        if (action & (262144 | 131072))
+          ;
+        else if (action & 65536) {
+          let rDepth = (action >> 19) - depth;
+          if (rDepth > 1) {
+            let term = action & 65535, target = this.stack.length - rDepth * 3;
+            if (target >= 0 && parser2.getGoto(this.stack[target], term, false) >= 0)
+              return rDepth << 19 | 65536 | term;
+          }
+        } else {
+          let found = explore(action, depth + 1);
+          if (found != null)
+            return found;
+        }
+      });
+    };
+    return explore(this.state, 0);
+  }
   /// @internal
   forceAll() {
     while (!this.p.parser.stateFlag(
@@ -2282,13 +2556,13 @@ var Stack = class {
   emitContext() {
     let last = this.buffer.length - 1;
     if (last < 0 || this.buffer[last] != -3)
-      this.buffer.push(this.curContext.hash, this.reducePos, this.reducePos, -3);
+      this.buffer.push(this.curContext.hash, this.pos, this.pos, -3);
   }
   /// @internal
   emitLookAhead() {
     let last = this.buffer.length - 1;
     if (last < 0 || this.buffer[last] != -4)
-      this.buffer.push(this.lookAhead, this.reducePos, this.reducePos, -4);
+      this.buffer.push(this.lookAhead, this.pos, this.pos, -4);
   }
   updateContext(context) {
     if (context != this.curContext.context) {
@@ -2645,16 +2919,17 @@ var LocalTokenGroup = class {
   token(input, stack) {
     let start = input.pos, skipped = 0;
     for (; ; ) {
+      let atEof = input.next < 0, nextPos = input.resolveOffset(1, 1);
       readToken(this.data, input, stack, 0, this.data, this.precTable);
       if (input.token.value > -1)
         break;
       if (this.elseToken == null)
         return;
-      if (input.next < 0)
+      if (!atEof)
+        skipped++;
+      if (nextPos == null)
         break;
-      input.advance();
-      input.reset(input.pos, input.token);
-      skipped++;
+      input.reset(nextPos, input.token);
     }
     if (skipped) {
       input.reset(start, input.token);
@@ -3367,26 +3642,30 @@ var LRParser = class extends Parser {
   }
   /// @internal
   validAction(state, action) {
-    if (action == this.stateSlot(
+    return !!this.allActions(state, (a) => a == action ? true : null);
+  }
+  /// @internal
+  allActions(state, action) {
+    let deflt = this.stateSlot(
       state,
       4
       /* ParseState.DefaultReduce */
-    ))
-      return true;
+    );
+    let result = deflt ? action(deflt) : void 0;
     for (let i = this.stateSlot(
       state,
       1
       /* ParseState.Actions */
-    ); ; i += 3) {
+    ); result == null; i += 3) {
       if (this.data[i] == 65535) {
         if (this.data[i + 1] == 1)
           i = pair(this.data, i + 2);
         else
-          return false;
+          break;
       }
-      if (action == pair(this.data, i + 1))
-        return true;
+      result = action(pair(this.data, i + 1));
     }
+    return result;
   }
   /// Get the states that can follow this one through shift actions or
   /// goto jumps. @internal
@@ -3494,476 +3773,178 @@ var LRParser = class extends Parser {
           (disabled || (disabled = new Uint8Array(this.maxTerm + 1)))[id] = 1;
       }
     return new Dialect(dialect, flags, disabled);
-  }
-  /// Used by the output of the parser generator. Not available to
-  /// user code. @hide
-  static deserialize(spec) {
-    return new LRParser(spec);
-  }
-};
-function pair(data, off) {
-  return data[off] | data[off + 1] << 16;
-}
-function findFinished(stacks) {
-  let best = null;
-  for (let stack of stacks) {
-    let stopped = stack.p.stoppedAt;
-    if ((stack.pos == stack.p.stream.end || stopped != null && stack.pos > stopped) && stack.p.parser.stateFlag(
-      stack.state,
-      2
-      /* StateFlag.Accepting */
-    ) && (!best || best.score < stack.score))
-      best = stack;
-  }
-  return best;
-}
-function getSpecializer(spec) {
-  if (spec.external) {
-    let mask = spec.extend ? 1 : 0;
-    return (value, stack) => spec.external(value, stack) << 1 | mask;
-  }
-  return spec.get;
-}
-
-// ../vuu-filter-parser/src/generated/filter-parser.js
-var parser = LRParser.deserialize({
-  version: 14,
-  states: "%QOVQPOOOOQO'#C_'#C_O_QQO'#C^OOQO'#DO'#DOOvQQO'#C|OOQO'#DR'#DROVQPO'#CuOOQO'#C}'#C}QOQPOOOOQO'#C`'#C`O!UQQO,58xO!dQPO,59VOVQPO,59]OVQPO,59_O!iQPO,59hO!nQQO,59aOOQO'#DQ'#DQOOQO1G.d1G.dO!UQQO1G.qO!yQQO1G.wOOQO1G.y1G.yOOQO'#Cw'#CwOOQO1G/S1G/SOOQO1G.{1G.{O#[QPO'#CnO#dQPO7+$]O!UQQO'#CxO#iQPO,59YOOQO<<Gw<<GwOOQO,59d,59dOOQO-E6v-E6v",
-  stateData: "#q~OoOS~OsPOvUO~OTXOUXOVXOWXOXXOYXO`ZO~Of[Oh]Oj^OmpX~OZ`O[`O]`O^`O~OabO~OseO~Of[Oh]OwgO~Oh]Ofeijeimeiwei~OcjOdbX~OdlO~OcjOdba~O",
-  goto: "#YvPPw}!TPPPPPPPPPPwPP!WPP!ZP!ZP!aP!g!jPPP!p!s!aP#P!aXROU[]XQOU[]RYQRibXTOU[]XVOU[]Rf^QkhRnkRWOQSOQ_UQc[Rd]QaYQhbRmj",
-  nodeNames: "\u26A0 Filter ColumnValueExpression Column Operator Eq NotEq Gt Lt Starts Ends Number String True False ColumnSetExpression In LBrack Values Comma RBrack AndExpression And OrExpression Or ParenthesizedExpression As FilterName",
-  maxTerm: 39,
-  skippedNodes: [0],
-  repeatNodeCount: 1,
-  tokenData: "6p~RnXY#PYZ#P]^#Ppq#Pqr#brs#mxy$eyz$j|}$o!O!P$t!Q![%S!^!_%_!_!`%d!`!a%i!c!}%n!}#O&V#P#Q&[#R#S%n#T#U&a#U#X%n#X#Y(w#Y#Z+]#Z#]%n#]#^.]#^#c%n#c#d/e#d#g%n#g#h0m#h#i4[#i#o%n~#USo~XY#PYZ#P]^#Ppq#P~#eP!_!`#h~#mOU~~#pWOX#mZ]#m^r#mrs$Ys#O#m#P;'S#m;'S;=`$_<%lO#m~$_O[~~$bP;=`<%l#m~$jOv~~$oOw~~$tOc~~$wP!Q![$z~%PPZ~!Q![$z~%XQZ~!O!P$t!Q![%S~%dOW~~%iOT~~%nOV~P%sUsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%n~&[Oa~~&aOd~R&fYsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#b%n#b#c'U#c#g%n#g#h(^#h#o%nR'ZWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#W%n#W#X's#X#o%nR'zUfQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR(eUjQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR(|WsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#b%n#b#c)f#c#o%nR)kWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#W%n#W#X*T#X#o%nR*YWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#g%n#g#h*r#h#o%nR*yUYQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR+bVsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#U+w#U#o%nR+|WsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#`%n#`#a,f#a#o%nR,kWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#g%n#g#h-T#h#o%nR-YWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#X%n#X#Y-r#Y#o%nR-yU^QsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR.bWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#b%n#b#c.z#c#o%nR/RU`QsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR/jWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#f%n#f#g0S#g#o%nR0ZUhQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR0rWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#h%n#h#i1[#i#o%nR1aVsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#U1v#U#o%nR1{WsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#f%n#f#g2e#g#o%nR2jWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#h%n#h#i3S#i#o%nR3XWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#g%n#g#h3q#h#o%nR3xUXQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR4aWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#f%n#f#g4y#g#o%nR5OWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#i%n#i#j5h#j#o%nR5mWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#X%n#X#Y6V#Y#o%nR6^U]QsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%n",
-  tokenizers: [0, 1],
-  topRules: { "Filter": [0, 1] },
-  tokenPrec: 0
-});
-
-// ../vuu-filter-parser/src/FilterTreeWalker.ts
-import {
-  isMultiClauseFilter as isMultiClauseFilter2,
-  isMultiValueFilter as isMultiValueFilter2,
-  isSingleValueFilter as isSingleValueFilter2
-} from "@vuu-ui/vuu-utils";
-var _filter;
-var FilterExpression = class {
-  constructor() {
-    __privateAdd(this, _filter, void 0);
-  }
-  setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter2(filter) && filter.op === op) {
-      return;
-    } else {
-      __privateSet(this, _filter, {
-        op,
-        filters: [__privateGet(this, _filter)]
-      });
-    }
-  }
-  add(filter) {
-    if (__privateGet(this, _filter) === void 0) {
-      __privateSet(this, _filter, filter);
-    } else if (isMultiClauseFilter2(__privateGet(this, _filter))) {
-      __privateGet(this, _filter).filters.push(filter);
-    } else {
-      throw Error(`Invalid filter passed to FilterExpression`);
-    }
-  }
-  setColumn(column, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter2(filter)) {
-      const target = filter.filters.at(-1);
-      if (target) {
-        this.setColumn(column, target);
-      }
-    } else if (filter) {
-      filter.column = column;
-    }
-  }
-  setOp(value, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter2(filter)) {
-      const target = filter.filters.at(-1);
-      if (target) {
-        this.setOp(value, target);
-      }
-    } else if (filter) {
-      filter.op = value;
-    }
-  }
-  setValue(value, filter = __privateGet(this, _filter)) {
-    var _a;
-    if (isMultiClauseFilter2(filter)) {
-      const target = filter.filters.at(-1);
-      if (target) {
-        this.setValue(value, target);
-      }
-    } else if (isMultiValueFilter2(filter)) {
-      (_a = filter.values) != null ? _a : filter.values = [];
-      filter.values.push(value);
-    } else if (isSingleValueFilter2(filter)) {
-      filter.value = value;
-    }
-  }
-  toJSON(filter = __privateGet(this, _filter)) {
-    if (this.name) {
-      return {
-        ...filter,
-        name: this.name
-      };
-    } else {
-      return filter;
-    }
-  }
-};
-_filter = new WeakMap();
-var walkTree = (tree, source) => {
-  const filterExpression = new FilterExpression();
-  const cursor = tree.cursor();
-  do {
-    const { name, from, to } = cursor;
-    switch (name) {
-      case "ColumnValueExpression":
-        filterExpression.add({});
-        break;
-      case "ColumnSetExpression":
-        filterExpression.add({ op: "in" });
-        break;
-      case "Or":
-      case "And":
-        filterExpression.setFilterCombinatorOp(source.substring(from, to));
-        break;
-      case "Column":
-        filterExpression.setColumn(source.substring(from, to));
-        break;
-      case "Operator":
-        filterExpression.setOp(source.substring(from, to));
-        break;
-      case "String":
-        filterExpression.setValue(source.substring(from + 1, to - 1));
-        break;
-      case "Number":
-        filterExpression.setValue(parseFloat(source.substring(from, to)));
-        break;
-      case "True":
-        filterExpression.setValue(true);
-        break;
-      case "False":
-        filterExpression.setValue(false);
-        break;
-      case "FilterName":
-        filterExpression.name = source.substring(from, to);
-        break;
-      default:
-    }
-  } while (cursor.next());
-  return filterExpression.toJSON();
-};
-
-// ../vuu-filter-parser/src/FilterParser.ts
-var strictParser = parser.configure({ strict: true });
-
-// ../vuu-data-react/src/hooks/useVuuMenuActions.ts
-import {
-  getRowRecord,
-  isGroupMenuItemDescriptor,
-  metadataKeys as metadataKeys2
-} from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback5 } from "react";
-var { KEY } = metadataKeys2;
-
-// ../vuu-data-react/src/hooks/useVuuTables.ts
-import { useCallback as useCallback6, useEffect as useEffect4, useState as useState4 } from "react";
-import { getServerAPI } from "@vuu-ui/vuu-data";
-
-// src/column-filter/TypeaheadFilter.tsx
-import { ComboBoxDeprecated } from "@heswell/salt-lab";
-import { useCallback as useCallback7, useEffect as useEffect5, useState as useState5 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var TypeaheadFilter = ({
-  defaultTypeaheadParams,
-  filterValues = [],
-  onChange: onFilterChange
-}) => {
-  const [tableName, columnName] = defaultTypeaheadParams;
-  const [searchValue, setSearchValue] = useState5("");
-  const [typeaheadValues, setTypeaheadValues] = useState5([]);
-  const getSuggestions = useTypeaheadSuggestions();
-  useEffect5(() => {
-    const params = searchValue ? [tableName, columnName, searchValue] : defaultTypeaheadParams;
-    let isSubscribed = true;
-    getSuggestions(params).then((options) => {
-      if (!isSubscribed) {
-        return;
-      }
-      if (isStartsWithValue(filterValues[0])) {
-        options.unshift(filterValues[0]);
-      }
-      if (searchValue) {
-        options.unshift(`${searchValue}...`);
-      }
-      options.concat(filterValues);
-      setTypeaheadValues(options);
-    });
-    return () => {
-      isSubscribed = false;
-    };
-  }, [
-    filterValues,
-    searchValue,
-    columnName,
-    tableName,
-    getSuggestions,
-    defaultTypeaheadParams
-  ]);
-  const onInputChange = useCallback7(
-    (evt) => {
-      const value = evt.target.value;
-      setSearchValue(value);
-    },
-    []
-  );
-  const onSelectionChange = useCallback7(
-    (_evt, selected) => {
-      setSearchValue("");
-      if (selected === null)
-        return;
-      if (selected.some(isStartsWithValue)) {
-        selected = selected.filter(isStartsWithValue).slice(-1);
-      }
-      const filter = getTypeaheadFilter(
-        columnName,
-        selected,
-        isStartsWithValue(selected[0])
-      );
-      onFilterChange(selected, filter);
-    },
-    [columnName, onFilterChange]
-  );
-  return /* @__PURE__ */ jsx4(
-    ComboBoxDeprecated,
-    {
-      multiSelect: true,
-      onInputChange,
-      onChange: onSelectionChange,
-      source: typeaheadValues,
-      style: { minWidth: 200 },
-      inputValue: searchValue,
-      selectedItem: filterValues
-    },
-    columnName
-  );
-};
-
-// src/column-filter/ColumnListItem.tsx
-import { memo } from "react";
-import {
-  Highlighter,
-  ListItem
-} from "@heswell/salt-lab";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ColumnListItem = (props) => {
-  return /* @__PURE__ */ jsx5(MemoColumnItem, { ...props });
-};
-var MemoColumnItem = memo(function MemoizedItem({
-  item,
-  itemTextHighlightPattern,
-  ...restProps
-}) {
-  return /* @__PURE__ */ jsx5(ListItem, { ...restProps, children: /* @__PURE__ */ jsx5("span", { style: { marginLeft: 10 }, children: /* @__PURE__ */ jsx5(
-    Highlighter,
-    {
-      matchPattern: itemTextHighlightPattern,
-      text: item == null ? void 0 : item.name
-    }
-  ) }) });
-});
-
-// src/column-filter/useColumnFilterStore.ts
-import { filterAsQuery as filterAsQuery2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback8, useState as useState6 } from "react";
-var addOrReplace = (array, newValue, key) => array.filter((oldValue) => oldValue[key] !== newValue[key]).concat(newValue);
-var useColumnFilterStore = (onFilterSubmit) => {
-  var _a, _b;
-  const [selectedColumnName, setSelectedColumnName] = useState6("");
-  const [savedFilters, setSavedFilters] = useState6([]);
-  const [rangeValues, setRangeValues] = useState6([]);
-  const [typeaheadValues, setTypeaheadValues] = useState6([]);
-  const clear = () => {
-    setSelectedColumnName("");
-    setRangeValues([]);
-    setTypeaheadValues([]);
-    setSavedFilters([]);
-    onFilterSubmit({ filter: "" });
-  };
-  const updateFilters = useCallback8(
-    (newFilter) => {
-      const newSavedFilters = addOrReplace(
-        savedFilters,
-        { column: selectedColumnName, filter: newFilter },
-        "column"
-      );
-      setSavedFilters(newSavedFilters);
-      const combinedFilter = newSavedFilters.map((x) => x.filter).reduce((prev, filter) => {
-        if (filter === void 0)
-          return prev;
-        return addFilter(prev, filter, { combineWith: AND });
-      }, void 0);
-      const query = combinedFilter === void 0 ? "" : filterAsQuery2(combinedFilter);
-      onFilterSubmit({ filter: query, filterStruct: combinedFilter });
-    },
-    [selectedColumnName, onFilterSubmit, savedFilters]
-  );
-  const onTypeaheadChange = useCallback8(
-    (newValues, newFilter) => {
-      setTypeaheadValues(
-        addOrReplace(
-          typeaheadValues,
-          { column: selectedColumnName, value: newValues },
-          "column"
-        )
-      );
-      updateFilters(newFilter);
-    },
-    [selectedColumnName, typeaheadValues, updateFilters]
-  );
-  const onRangeChange = useCallback8(
-    (newValues, newFilter) => {
-      setRangeValues(
-        addOrReplace(
-          rangeValues,
-          { column: selectedColumnName, value: newValues },
-          "column"
-        )
-      );
-      updateFilters(newFilter);
-    },
-    [selectedColumnName, rangeValues, updateFilters]
-  );
-  const onSelectedColumnChange = useCallback8(
-    (column) => setSelectedColumnName((column == null ? void 0 : column.name) || ""),
-    []
-  );
-  const rangeValue = (_a = rangeValues.filter(
-    (v) => v.column === selectedColumnName
-  )[0]) == null ? void 0 : _a.value;
-  const typeaheadValue = (_b = typeaheadValues.filter(
-    (v) => v.column === selectedColumnName
-  )[0]) == null ? void 0 : _b.value;
-  return {
-    clear,
-    selectedColumnName,
-    rangeValue,
-    typeaheadValue,
-    onSelectedColumnChange,
-    onRangeChange,
-    onTypeaheadChange
-  };
+  }
+  /// Used by the output of the parser generator. Not available to
+  /// user code. @hide
+  static deserialize(spec) {
+    return new LRParser(spec);
+  }
 };
+function pair(data, off) {
+  return data[off] | data[off + 1] << 16;
+}
+function findFinished(stacks) {
+  let best = null;
+  for (let stack of stacks) {
+    let stopped = stack.p.stoppedAt;
+    if ((stack.pos == stack.p.stream.end || stopped != null && stack.pos > stopped) && stack.p.parser.stateFlag(
+      stack.state,
+      2
+      /* StateFlag.Accepting */
+    ) && (!best || best.score < stack.score))
+      best = stack;
+  }
+  return best;
+}
+function getSpecializer(spec) {
+  if (spec.external) {
+    let mask = spec.extend ? 1 : 0;
+    return (value, stack) => spec.external(value, stack) << 1 | mask;
+  }
+  return spec.get;
+}
 
-// src/column-filter/ColumnFilter.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var ColumnFilter = ({
-  className,
-  table,
-  columns,
-  onFilterSubmit,
-  ...htmlAttributes
-}) => {
-  const {
-    clear,
-    onTypeaheadChange,
-    onRangeChange,
-    onSelectedColumnChange,
-    selectedColumnName,
-    rangeValue,
-    typeaheadValue
-  } = useColumnFilterStore(onFilterSubmit);
-  const getFilterComponent = () => {
+// ../vuu-filter-parser/src/generated/filter-parser.js
+var parser = LRParser.deserialize({
+  version: 14,
+  states: "%QOVQPOOOOQO'#C_'#C_O_QQO'#C^OOQO'#DO'#DOOvQQO'#C|OOQO'#DR'#DROVQPO'#CuOOQO'#C}'#C}QOQPOOOOQO'#C`'#C`O!UQQO,58xO!dQPO,59VOVQPO,59]OVQPO,59_O!iQPO,59hO!nQQO,59aOOQO'#DQ'#DQOOQO1G.d1G.dO!UQQO1G.qO!yQQO1G.wOOQO1G.y1G.yOOQO'#Cw'#CwOOQO1G/S1G/SOOQO1G.{1G.{O#[QPO'#CnO#dQPO7+$]O!UQQO'#CxO#iQPO,59YOOQO<<Gw<<GwOOQO,59d,59dOOQO-E6v-E6v",
+  stateData: "#q~OoOS~OsPOvUO~OTXOUXOVXOWXOXXOYXO`ZO~Of[Oh]Oj^OmpX~OZ`O[`O]`O^`O~OabO~OseO~Of[Oh]OwgO~Oh]Ofeijeimeiwei~OcjOdbX~OdlO~OcjOdba~O",
+  goto: "#YvPPw}!TPPPPPPPPPPwPP!WPP!ZP!ZP!aP!g!jPPP!p!s!aP#P!aXROU[]XQOU[]RYQRibXTOU[]XVOU[]Rf^QkhRnkRWOQSOQ_UQc[Rd]QaYQhbRmj",
+  nodeNames: "\u26A0 Filter ColumnValueExpression Column Operator Eq NotEq Gt Lt Starts Ends Number String True False ColumnSetExpression In LBrack Values Comma RBrack AndExpression And OrExpression Or ParenthesizedExpression As FilterName",
+  maxTerm: 39,
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: "6p~RnXY#PYZ#P]^#Ppq#Pqr#brs#mxy$eyz$j|}$o!O!P$t!Q![%S!^!_%_!_!`%d!`!a%i!c!}%n!}#O&V#P#Q&[#R#S%n#T#U&a#U#X%n#X#Y(w#Y#Z+]#Z#]%n#]#^.]#^#c%n#c#d/e#d#g%n#g#h0m#h#i4[#i#o%n~#USo~XY#PYZ#P]^#Ppq#P~#eP!_!`#h~#mOU~~#pWOX#mZ]#m^r#mrs$Ys#O#m#P;'S#m;'S;=`$_<%lO#m~$_O[~~$bP;=`<%l#m~$jOv~~$oOw~~$tOc~~$wP!Q![$z~%PPZ~!Q![$z~%XQZ~!O!P$t!Q![%S~%dOW~~%iOT~~%nOV~P%sUsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%n~&[Oa~~&aOd~R&fYsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#b%n#b#c'U#c#g%n#g#h(^#h#o%nR'ZWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#W%n#W#X's#X#o%nR'zUfQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR(eUjQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR(|WsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#b%n#b#c)f#c#o%nR)kWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#W%n#W#X*T#X#o%nR*YWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#g%n#g#h*r#h#o%nR*yUYQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR+bVsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#U+w#U#o%nR+|WsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#`%n#`#a,f#a#o%nR,kWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#g%n#g#h-T#h#o%nR-YWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#X%n#X#Y-r#Y#o%nR-yU^QsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR.bWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#b%n#b#c.z#c#o%nR/RU`QsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR/jWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#f%n#f#g0S#g#o%nR0ZUhQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR0rWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#h%n#h#i1[#i#o%nR1aVsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#U1v#U#o%nR1{WsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#f%n#f#g2e#g#o%nR2jWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#h%n#h#i3S#i#o%nR3XWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#g%n#g#h3q#h#o%nR3xUXQsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%nR4aWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#f%n#f#g4y#g#o%nR5OWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#i%n#i#j5h#j#o%nR5mWsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#X%n#X#Y6V#Y#o%nR6^U]QsP}!O%n!O!P%n!Q![%n!c!}%n#R#S%n#T#o%n",
+  tokenizers: [0, 1],
+  topRules: { "Filter": [0, 1] },
+  tokenPrec: 0
+});
+
+// ../vuu-filter-parser/src/FilterTreeWalker.ts
+import {
+  isMultiClauseFilter as isMultiClauseFilter2,
+  isMultiValueFilter as isMultiValueFilter2,
+  isSingleValueFilter as isSingleValueFilter2
+} from "@vuu-ui/vuu-utils";
+var _filter;
+var FilterExpression = class {
+  constructor() {
+    __privateAdd(this, _filter, void 0);
+  }
+  setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
+    if (isMultiClauseFilter2(filter) && filter.op === op) {
+      return;
+    } else {
+      __privateSet(this, _filter, {
+        op,
+        filters: [__privateGet(this, _filter)]
+      });
+    }
+  }
+  add(filter) {
+    if (__privateGet(this, _filter) === void 0) {
+      __privateSet(this, _filter, filter);
+    } else if (isMultiClauseFilter2(__privateGet(this, _filter))) {
+      __privateGet(this, _filter).filters.push(filter);
+    } else {
+      throw Error(`Invalid filter passed to FilterExpression`);
+    }
+  }
+  setColumn(column, filter = __privateGet(this, _filter)) {
+    if (isMultiClauseFilter2(filter)) {
+      const target = filter.filters.at(-1);
+      if (target) {
+        this.setColumn(column, target);
+      }
+    } else if (filter) {
+      filter.column = column;
+    }
+  }
+  setOp(value, filter = __privateGet(this, _filter)) {
+    if (isMultiClauseFilter2(filter)) {
+      const target = filter.filters.at(-1);
+      if (target) {
+        this.setOp(value, target);
+      }
+    } else if (filter) {
+      filter.op = value;
+    }
+  }
+  setValue(value, filter = __privateGet(this, _filter)) {
     var _a;
-    const defaultTypeaheadParams = [table, selectedColumnName];
-    const selectedColumnType = (_a = columns.find(
-      (column) => column.name === selectedColumnName
-    )) == null ? void 0 : _a.serverDataType;
-    switch (selectedColumnType) {
-      case "string":
-      case "char":
-        return /* @__PURE__ */ jsx6(
-          ToolbarField2,
-          {
-            label: "Start typing to select a filter",
-            labelPlacement: "top",
-            children: /* @__PURE__ */ jsx6(
-              TypeaheadFilter,
-              {
-                defaultTypeaheadParams,
-                filterValues: typeaheadValue,
-                onChange: onTypeaheadChange
-              }
-            )
-          }
-        );
-      case "int":
-      case "long":
-      case "double":
-        return /* @__PURE__ */ jsx6(ToolbarField2, { label: "Select a range", labelPlacement: "top", children: /* @__PURE__ */ jsx6(
-          RangeFilter,
-          {
-            defaultTypeaheadParams,
-            filterValues: rangeValue,
-            onChange: onRangeChange
-          }
-        ) });
-      default:
-        return /* @__PURE__ */ jsx6(ToolbarField2, { children: /* @__PURE__ */ jsx6(Text, { children: "Data type unsupported" }) });
+    if (isMultiClauseFilter2(filter)) {
+      const target = filter.filters.at(-1);
+      if (target) {
+        this.setValue(value, target);
+      }
+    } else if (isMultiValueFilter2(filter)) {
+      (_a = filter.values) != null ? _a : filter.values = [];
+      filter.values.push(value);
+    } else if (isSingleValueFilter2(filter)) {
+      filter.value = value;
     }
-  };
-  return /* @__PURE__ */ jsxs3(
-    Toolbar,
-    {
-      ...htmlAttributes,
-      style: { alignItems: "center", height: "36px" },
-      children: [
-        /* @__PURE__ */ jsx6(
-          ToolbarField2,
-          {
-            label: "Select a column to filter",
-            labelPlacement: "top",
-            style: { width: 180 },
-            children: /* @__PURE__ */ jsx6(
-              Dropdown,
-              {
-                source: columns,
-                ListItem: ColumnListItem,
-                itemToString: (column) => column.name,
-                onSelectionChange: (_evt, column) => onSelectedColumnChange(column)
-              }
-            )
-          }
-        ),
-        selectedColumnName && getFilterComponent(),
-        /* @__PURE__ */ jsx6(ToolbarButton, { onClick: clear, children: /* @__PURE__ */ jsx6(DeleteIcon, {}) })
-      ]
+  }
+  toJSON(filter = __privateGet(this, _filter)) {
+    if (this.name) {
+      return {
+        ...filter,
+        name: this.name
+      };
+    } else {
+      return filter;
     }
-  );
+  }
+};
+_filter = new WeakMap();
+var walkTree = (tree, source) => {
+  const filterExpression = new FilterExpression();
+  const cursor = tree.cursor();
+  do {
+    const { name, from, to } = cursor;
+    switch (name) {
+      case "ColumnValueExpression":
+        filterExpression.add({});
+        break;
+      case "ColumnSetExpression":
+        filterExpression.add({ op: "in" });
+        break;
+      case "Or":
+      case "And":
+        filterExpression.setFilterCombinatorOp(source.substring(from, to));
+        break;
+      case "Column":
+        filterExpression.setColumn(source.substring(from, to));
+        break;
+      case "Operator":
+        filterExpression.setOp(source.substring(from, to));
+        break;
+      case "String":
+        filterExpression.setValue(source.substring(from + 1, to - 1));
+        break;
+      case "Number":
+        filterExpression.setValue(parseFloat(source.substring(from, to)));
+        break;
+      case "True":
+        filterExpression.setValue(true);
+        break;
+      case "False":
+        filterExpression.setValue(false);
+        break;
+      case "FilterName":
+        filterExpression.name = source.substring(from, to);
+        break;
+      default:
+    }
+  } while (cursor.next());
+  return filterExpression.toJSON();
 };
 
-// src/filter-input/FilterInput.tsx
-import { Button } from "@salt-ds/core";
+// ../vuu-filter-parser/src/FilterParser.ts
+var strictParser = parser.configure({ strict: true });
 
 // src/filter-input/useCodeMirrorEditor.ts
-import {
-  autocompletion,
-  defaultKeymap,
-  EditorState as EditorState2,
-  EditorView as EditorView2,
-  ensureSyntaxTree,
-  keymap,
-  minimalSetup,
-  startCompletion
-} from "@vuu-ui/vuu-codemirror";
 var import_classnames = __toESM(require_classnames(), 1);
-import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useMemo, useRef } from "react";
 
 // src/filter-input/FilterLanguage.ts
 import {
@@ -4081,7 +4062,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback3 } from "react";
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -4151,7 +4132,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = useCallback9(
+  const makeSuggestions = useCallback3(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -4162,7 +4143,7 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return useCallback9(
+  return useCallback3(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -4346,15 +4327,15 @@ var useCodeMirrorEditor = ({
   onSubmitFilter,
   suggestionProvider
 }) => {
-  const editorRef = useRef2(null);
-  const onSubmit = useRef2(noop);
-  const viewRef = useRef2();
+  const editorRef = useRef(null);
+  const onSubmit = useRef(noop);
+  const viewRef = useRef();
   const completionFn = useAutoComplete(
     suggestionProvider,
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = useMemo2(() => {
+  const [createState, clearInput] = useMemo(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -4429,7 +4410,7 @@ var useCodeMirrorEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onSubmitFilter]);
-  useEffect6(() => {
+  useEffect2(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -4491,7 +4472,11 @@ import {
   stringOperators,
   toSuggestions
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback10, useRef as useRef3 } from "react";
+import {
+  getTypeaheadParams,
+  useTypeaheadSuggestions as useTypeaheadSuggestions2
+} from "@vuu-ui/vuu-data-react";
+import { useCallback as useCallback4, useRef as useRef2 } from "react";
 
 // src/filter-input/filterInfo.ts
 import { createEl } from "@vuu-ui/vuu-utils";
@@ -4585,11 +4570,11 @@ var useFilterSuggestionProvider = ({
   namedFilters,
   saveOptions = defaultSaveOptions,
   table,
-  typeaheadHook: useTypeahead = useTypeaheadSuggestions
+  typeaheadHook: useTypeahead = useTypeaheadSuggestions2
 }) => {
-  const latestSuggestionsRef = useRef3();
+  const latestSuggestionsRef = useRef2();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = useCallback10(
+  const getSuggestions = useCallback4(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -4679,7 +4664,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = useCallback10(
+  const isPartialMatch = useCallback4(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0
@@ -4719,7 +4704,7 @@ import { ToggleButton, ToolbarField as ToolbarField3 } from "@heswell/salt-lab";
 
 // src/filter-toolbar/FilterDropdown.tsx
 import { Dropdown as Dropdown2 } from "@heswell/salt-lab";
-import { useCallback as useCallback11, useState as useState7 } from "react";
+import { useCallback as useCallback5, useState as useState3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var isString = (s) => typeof s === "string";
 var stripQuotes = (selected) => {
@@ -4741,9 +4726,9 @@ var FilterDropdown = ({
 }) => {
   const selected = selectedProp != null ? stripQuotes(selectedProp) : void 0;
   const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
-  const [values, setValues] = useState7(initialValues);
+  const [values, setValues] = useState3(initialValues);
   console.log({ initialValues });
-  const handleOpenChange = useCallback11(
+  const handleOpenChange = useCallback5(
     async (isOpen) => {
       if (isOpen) {
         const values2 = await suggestionProvider.getSuggestions("columnValue", {
@@ -4768,7 +4753,7 @@ var FilterDropdown = ({
 
 // src/filter-toolbar/FilterDropdownMultiSelect.tsx
 import { Dropdown as Dropdown3 } from "@heswell/salt-lab";
-import { useCallback as useCallback12, useState as useState8 } from "react";
+import { useCallback as useCallback6, useState as useState4 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var isString2 = (s) => typeof s === "string";
 var stripQuotes2 = (selected) => {
@@ -4792,8 +4777,8 @@ var FilterDropdownMultiSelect = ({
 }) => {
   const selected = stripQuotes2(selectedProp);
   const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
-  const [values, setValues] = useState8(initialValues);
-  const handleOpenChange = useCallback12(
+  const [values, setValues] = useState4(initialValues);
+  const handleOpenChange = useCallback6(
     async (isOpen) => {
       if (isOpen) {
         const values2 = await suggestionProvider.getSuggestions("columnValue", {