@vuu-ui/vuu-filters 0.7.0-debug → 0.7.1-debug

package/cjs/index.js

@@ -103,6 +103,7 @@ var require_classnames = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   AND: () => AND,
+  ColumnFilter: () => ColumnFilter,
   ENDS_WITH: () => ENDS_WITH,
   EQUALS: () => EQUALS,
   FilterInput: () => FilterInput,
@@ -122,11 +123,11 @@ __export(src_exports, {
   isAndFilter: () => isAndFilter,
   isFilterClause: () => isFilterClause,
   isInFilter: () => isInFilter,
-  isMultiClauseFilter: () => isMultiClauseFilter2,
-  isMultiValueFilter: () => isMultiValueFilter2,
+  isMultiClauseFilter: () => isMultiClauseFilter,
+  isMultiValueFilter: () => isMultiValueFilter,
   isNamedFilter: () => isNamedFilter,
   isOrFilter: () => isOrFilter,
-  isSingleValueFilter: () => isSingleValueFilter2,
+  isSingleValueFilter: () => isSingleValueFilter,
   overrideColName: () => overrideColName,
   parseFilter: () => parseFilter,
   removeColumnFromFilter: () => removeColumnFromFilter,
@@ -138,1456 +139,1910 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/filter-input/FilterInput.tsx
+// src/column-filter/ColumnFilter.tsx
+var import_salt_lab4 = require("@heswell/salt-lab");
 var import_core = require("@salt-ds/core");
 
-// src/filter-input/useCodeMirrorEditor.ts
-var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
-var import_classnames = __toESM(require_classnames(), 1);
-var import_react2 = require("react");
+// ../../node_modules/@salt-ds/icons/dist-es/packages/icons/src/icon/Icon.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 
-// src/filter-input/filter-language-parser/FilterLanguage.ts
-var import_vuu_codemirror2 = require("@vuu-ui/vuu-codemirror");
+// ../../node_modules/clsx/dist/clsx.m.js
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    else
+      for (t in e)
+        e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; )
+    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
 
-// src/filter-input/filter-language-parser/generated/filter-parser.js
-var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
-var parser = import_vuu_codemirror.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
-});
+// ../../node_modules/@salt-ds/icons/dist-es/node_modules/style-inject/dist/style-inject.es.js
+function styleInject(css, ref) {
+  if (ref === void 0)
+    ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === "undefined") {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName("head")[0];
+  var style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
 
-// src/filter-input/filter-language-parser/FilterLanguage.ts
-var filterLanguage = import_vuu_codemirror2.LRLanguage.define({
-  name: "VuuFilterQuery",
-  parser: parser.configure({
-    props: [
-      (0, import_vuu_codemirror2.styleTags)({
-        Identifier: import_vuu_codemirror2.tags.variableName,
-        String: import_vuu_codemirror2.tags.string,
-        Or: import_vuu_codemirror2.tags.emphasis,
-        Operator: import_vuu_codemirror2.tags.operator
-      })
-    ]
-  })
+// ../../node_modules/@salt-ds/icons/dist-es/packages/icons/src/icon/Icon.css.js
+var css_248z = "/* Style applied to the root element */\n.saltIcon {\n  --icon-color: var(--saltIcon-color, var(--salt-text-secondary-foreground));\n  --icon-size-multiplier: var(--saltIcon-size-multiplier, 1);\n  --icon-base-size: var(--salt-size-icon-base, 12px);\n  /**\n   * Icon size will be the multiplier (an integer from the size prop) * the base size (set by the theme per density)\n   * Icons should never be smaller than 12px for readability so we've added a max() to enforce this\n  */\n  --icon-size: max(calc(var(--icon-base-size) * var(--icon-size-multiplier)), 12px);\n}\n\n.saltIcon {\n  fill: var(--saltIcon-color, var(--icon-color));\n  display: inline-block;\n  margin: var(--saltIcon-margin, 0);\n  position: relative;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  min-width: var(--icon-size);\n  min-height: var(--icon-size);\n}\n\n.saltIcon:hover {\n  --icon-color: var(--saltIcon-color-hover, var(--salt-text-secondary-foreground));\n}\n\n.saltIcon:active {\n  --icon-color: var(--saltIcon-color-active, var(--salt-text-secondary-foreground));\n}\n";
+styleInject(css_248z);
+
+// ../../node_modules/@salt-ds/icons/dist-es/packages/icons/src/icon/Icon.js
+var makePrefixer = (prefix) => (...names) => [prefix, ...names].join("-");
+var withBaseName = makePrefixer("saltIcon");
+var DEFAULT_ICON_SIZE = 1;
+var Icon = (0, import_react.forwardRef)(function Icon2({ children, className, size = DEFAULT_ICON_SIZE, style: styleProp, ...rest }, ref) {
+  const style = {
+    ...styleProp,
+    "--saltIcon-size-multiplier": `${size}`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+    className: clsx(withBaseName(), className),
+    style,
+    role: "img",
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+      "aria-hidden": true,
+      children
+    })
+  });
 });
-var filterLanguageSupport = () => {
-  return new import_vuu_codemirror2.LanguageSupport(filterLanguage);
-};
 
-// src/filter-input/filter-language-parser/FilterTreeWalker.ts
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var _filter;
-var FilterExpression = class {
-  constructor() {
-    __privateAdd(this, _filter, void 0);
+// ../../node_modules/@salt-ds/icons/dist-es/packages/icons/src/components/Delete.js
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var DeleteIcon = (0, import_react2.forwardRef)(
+  function DeleteIcon2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, {
+      "data-testid": "DeleteIcon",
+      "aria-label": "delete",
+      viewBox: "0 0 12 12",
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", {
+          d: "M5 4v6H4V4h1Zm2 0v6H6V4h1Z"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", {
+          fillRule: "evenodd",
+          d: "M4 0a1 1 0 0 0-1 1v1H0v1h1v7a2 2 0 0 0 2 2h5.25A1.75 1.75 0 0 0 10 10.25V3h1V2H8V1a1 1 0 0 0-1-1H4Zm5 3H2v7a1 1 0 0 0 1 1h5.25a.75.75 0 0 0 .75-.75V3ZM7 2H4v-.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V2Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
   }
-  setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils.isMultiClauseFilter)(filter) && filter.op === op) {
-      return;
+);
+
+// src/column-filter/RangeFilter.tsx
+var import_salt_lab = require("@heswell/salt-lab");
+
+// src/filter-utils.ts
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+
+// src/filterTypes.ts
+var singleValueFilterOps = /* @__PURE__ */ new Set([
+  "=",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+  "starts",
+  "ends"
+]);
+var isNamedFilter = (f) => f !== void 0 && f.name !== void 0;
+var isSingleValueFilter = (f) => f !== void 0 && singleValueFilterOps.has(f.op);
+var isFilterClause = (f) => f !== void 0 && (isSingleValueFilter(f) || isMultiValueFilter(f));
+var isMultiValueFilter = (f) => f !== void 0 && f.op === "in";
+var isInFilter = (f) => f.op === "in";
+var isAndFilter = (f) => f.op === "and";
+var isOrFilter = (f) => f.op === "or";
+function isMultiClauseFilter(f) {
+  return f !== void 0 && (f.op === "and" || f.op === "or");
+}
+
+// src/filter-utils.ts
+var AND = "and";
+var EQUALS = "=";
+var GREATER_THAN = ">";
+var LESS_THAN = "<";
+var OR = "or";
+var STARTS_WITH = "starts";
+var ENDS_WITH = "ends";
+var IN = "in";
+var filterClauses = (filter, clauses = []) => {
+  if (filter) {
+    if (isMultiClauseFilter(filter)) {
+      filter.filters.forEach((f) => clauses.push(...filterClauses(f)));
     } else {
-      __privateSet(this, _filter, {
-        op,
-        filters: [__privateGet(this, _filter)]
-      });
+      clauses.push(filter);
     }
   }
-  add(filter) {
-    if (__privateGet(this, _filter) === void 0) {
-      __privateSet(this, _filter, filter);
-    } else if ((0, import_vuu_utils.isMultiClauseFilter)(__privateGet(this, _filter))) {
-      __privateGet(this, _filter).filters.push(filter);
+  return clauses;
+};
+var DEFAULT_ADD_FILTER_OPTS = {
+  combineWith: "and"
+};
+var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
+  var _a;
+  if (includesNoValues(filter)) {
+    if (isMultiClauseFilter(filter)) {
     } else {
-      throw Error(`Invalid filter passed to FilterExpression`);
+      existingFilter = removeFilterForColumn(existingFilter, {
+        name: filter.column
+      });
     }
-  }
-  setColumn(column, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils.isMultiClauseFilter)(filter)) {
-      const target = filter.filters.at(-1);
-      if (target) {
-        this.setColumn(column, target);
-      }
-    } else if (filter) {
-      filter.column = column;
+  } else if (includesAllValues(filter)) {
+    if (isMultiClauseFilter(filter)) {
     }
+    return removeFilterForColumn(existingFilter, { name: (_a = filter.column) != null ? _a : "" });
   }
-  setOp(value, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils.isMultiClauseFilter)(filter)) {
-      const target = filter.filters.at(-1);
-      if (target) {
-        this.setOp(value, target);
-      }
-    } else if (filter) {
-      filter.op = value;
-    }
+  if (!existingFilter) {
+    return filter;
   }
-  setValue(value, filter = __privateGet(this, _filter)) {
-    var _a;
-    if ((0, import_vuu_utils.isMultiClauseFilter)(filter)) {
-      const target = filter.filters.at(-1);
-      if (target) {
-        this.setValue(value, target);
-      }
-    } else if ((0, import_vuu_utils.isMultiValueFilter)(filter)) {
-      (_a = filter.values) != null ? _a : filter.values = [];
-      filter.values.push(value);
-    } else if ((0, import_vuu_utils.isSingleValueFilter)(filter)) {
-      filter.value = value;
-    }
+  if (!filter) {
+    return existingFilter;
   }
-  toJSON(filter = __privateGet(this, _filter)) {
-    if (this.name) {
-      return {
-        ...filter,
-        name: this.name
-      };
-    } else {
-      return filter;
-    }
+  if (existingFilter.op === AND && filter.op === AND) {
+    return {
+      op: AND,
+      filters: combine(existingFilter.filters, filter.filters)
+    };
+  }
+  if (existingFilter.op === AND) {
+    const filters = replaceOrInsert(existingFilter.filters, filter);
+    return filters.length > 1 ? { op: AND, filters } : filters[0];
+  }
+  if (filter.op === AND) {
+    return { op: AND, filters: filter.filters.concat(existingFilter) };
+  }
+  if (filterEquals(existingFilter, filter, true)) {
+    return filter;
   }
+  if (canMerge(existingFilter, filter)) {
+    return merge(existingFilter, filter);
+  }
+  return { op: combineWith, filters: [existingFilter, 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();
+var includesNoValues = (filter) => {
+  if (!filter) {
+    return false;
+  }
+  if (isInFilter(filter) && filter.values.length === 0) {
+    return true;
+  }
+  return isAndFilter(filter) && filter.filters.some((f) => includesNoValues(f));
 };
-
-// src/filter-input/filter-language-parser/FilterParser.ts
-var strictParser = parser.configure({ strict: true });
-var parseFilter = (filterQuery) => {
-  const parseTree = strictParser.parse(filterQuery);
-  const filter = walkTree(parseTree, filterQuery);
-  return filter;
+var filterValue = (value) => typeof value === "string" ? `"${value}"` : value;
+var filterAsQuery = (f) => {
+  if (isMultiClauseFilter(f)) {
+    return f.filters.map((filter) => filterAsQuery(filter)).join(` ${f.op} `);
+  } else if (isMultiValueFilter(f)) {
+    return `${f.column} ${f.op} [${f.values.join(",")}]`;
+  } else {
+    return `${f.column} ${f.op} ${filterValue(f.value)}`;
+  }
 };
-
-// src/filter-input/highlighting.ts
-var import_vuu_codemirror3 = require("@vuu-ui/vuu-codemirror");
-var myHighlightStyle = import_vuu_codemirror3.HighlightStyle.define([
-  { tag: import_vuu_codemirror3.tags.variableName, color: "var(--vuuFilterEditor-variableColor)" },
-  { tag: import_vuu_codemirror3.tags.comment, color: "green", fontStyle: "italic" }
-]);
-var vuuHighlighting = (0, import_vuu_codemirror3.syntaxHighlighting)(myHighlightStyle);
-
-// src/filter-input/theme.ts
-var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var vuuTheme = import_vuu_codemirror4.EditorView.theme(
-  {
-    "&": {
-      color: "var(--vuuFilterEditor-color)",
-      backgroundColor: "var(--vuuFilterEditor-background)",
-      fontSize: "var(--vuuFilterEditor-fontSize)"
-    },
-    ".cm-content": {
-      caretColor: "var(--vuuFilterEditor-cursorColor)",
-      padding: 0
-    },
-    ".cm-line": {
-      lineHeight: "var(--vuuFilterEditor-lineHeight)"
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
-    },
-    "&.cm-focused .cm-selectionBackground, ::selection": {
-      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
-    },
-    ".cm-selectionBackground, ::selection": {
-      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
-    },
-    ".cm-scroller": {
-      fontFamily: "var(--vuuFilterEditor-fontFamily)"
-    },
-    ".cm-tooltip": {
-      background: "var(--vuuFilterEditor-tooltipBackground)",
-      border: "var(--vuuFilterEditor-tooltipBorder)",
-      boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
-      "&.cm-tooltip-autocomplete > ul": {
-        fontFamily: "var(--vuuFilterEditor-fontFamily)",
-        fontSize: "var(--vuuFilterEditor-fontSize)",
-        maxHeight: "240px"
-      },
-      "&.cm-tooltip-autocomplete > ul > li": {
-        alignItems: "center",
-        display: "flex",
-        height: "var(--vuuFilterEditor-suggestion-height)",
-        padding: "0 3px",
-        lineHeight: "var(--vuuFilterEditor-suggestion-height)"
-      },
-      "&.cm-tooltip-autocomplete li[aria-selected]": {
-        background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
-        color: "var(--vuuFilterEditor-suggestion-selectedColor)"
-      }
-    },
-    ".cm-completionIcon": {
-      height: "18px",
-      flex: "0 0 16px"
-    },
-    ".cm-completionLabel": {
-      flex: "1 1 auto"
-    },
-    ".cm-completionIcon-filter": {
-      position: "relative",
-      "&:after": {
-        background: "var(--salt-text-secondary-foreground)",
-        content: "''",
-        "-webkit-mask": "var(--svg-filter) center center/13px 13px",
-        "-webkit-mask-repeat": "no-repeat",
-        position: "absolute",
-        height: "18px",
-        left: "0px",
-        top: "0px",
-        width: "16px"
-      }
-    }
-  },
-  { dark: false }
-);
-
-// src/filter-input/useFilterAutoComplete.ts
-var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
-var import_react = require("react");
-var getOperator = (node, state) => {
-  let maybeColumnNode = node.prevSibling || node.parent;
-  while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
-    maybeColumnNode = maybeColumnNode.prevSibling || maybeColumnNode.parent;
+var includesAllValues = (filter) => {
+  if (!filter) {
+    return false;
   }
-  if ((maybeColumnNode == null ? void 0 : maybeColumnNode.name) === "In" || (maybeColumnNode == null ? void 0 : maybeColumnNode.name) === "Operator") {
-    return (0, import_vuu_codemirror5.getValue)(maybeColumnNode, state);
-  } else {
-    return void 0;
+  if (filter.op === STARTS_WITH && filter.value === "") {
+    return true;
   }
+  return filter.op === STARTS_WITH && filter.value === "";
 };
-var getPartialOperator = (maybeOperatorNode, state, columnName) => {
-  const value = (0, import_vuu_codemirror5.getValue)(maybeOperatorNode, state);
-  if (columnName === void 0 || value === columnName) {
-    return;
+var replaceOrInsert = (filters, filter) => {
+  return filters.concat(filter);
+};
+var merge = (f1, f2) => {
+  if (includesNoValues(f2)) {
+    return f2;
   }
-  if (["contains", "ends", "starts"].some(
-    (val) => val.startsWith(value.toLowerCase())
-  )) {
-    return value;
-  } else {
-    return void 0;
+  if (isInFilter(f1) && isInFilter(f2)) {
+    return {
+      ...f1,
+      values: [
+        ...f1.values,
+        ...f2.values.filter(
+          (v) => !f1.values.includes(v)
+        )
+      ]
+    };
+  } else if (isInFilter(f1) && f2.op === EQUALS) {
+    return {
+      ...f1,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      values: f1.values.concat([f2.value])
+    };
+  } else if (f1.op === EQUALS && f2.op === EQUALS) {
+    return {
+      column: f1.column,
+      op: IN,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      values: [f1.value, f2.value]
+    };
   }
+  return f2;
 };
-var getClauseOperator = (node, state) => {
-  let maybeTargetNode = node.prevSibling || node.parent || node.lastChild;
-  while (maybeTargetNode && maybeTargetNode.name === "\u26A0")
-    maybeTargetNode = maybeTargetNode.prevSibling;
-  if (maybeTargetNode && ["As", "Or", "And"].includes(maybeTargetNode.name)) {
-    return (0, import_vuu_codemirror5.getValue)(maybeTargetNode, state);
-  } else {
-    return void 0;
-  }
+var combine = (existingFilters, replacementFilters) => {
+  const equivalentType = ({ op: t1 }, { op: t2 }) => {
+    return t1 === t2 || t1[0] === t2[0];
+  };
+  const replaces = (existingFilter, replacementFilter) => {
+    return existingFilter.column === replacementFilter.column && equivalentType(existingFilter, replacementFilter);
+  };
+  const stillApplicable = (existingFilter) => replacementFilters.some(
+    (replacementFilter) => replaces(existingFilter, replacementFilter)
+  ) === false;
+  return existingFilters.filter(stillApplicable).concat(replacementFilters);
 };
-var getFilterName = (node, state) => {
-  if (node.name === "FilterName") {
-    return (0, import_vuu_codemirror5.getValue)(node, state);
-  } else {
-    let maybeTargetNode = node.prevSibling || node.parent || node.lastChild;
-    while (maybeTargetNode && maybeTargetNode.name !== "FilterName")
-      maybeTargetNode = maybeTargetNode.prevSibling;
-    if (maybeTargetNode && maybeTargetNode.name === "FilterName") {
-      return (0, import_vuu_codemirror5.getValue)(node, state);
+var removeColumnFromFilter = (column, filter) => {
+  if (isMultiClauseFilter(filter)) {
+    const [clause1, clause2] = filter.filters;
+    if (clause1.column === column.name) {
+      return [clause2, filterAsQuery(clause2)];
+    }
+    if (clause2.column === column.name) {
+      return [clause1, filterAsQuery(clause1)];
     }
   }
+  return [void 0, ""];
 };
-var getColumnName = (node, state) => {
-  const prevNode = node.prevSibling;
-  if ((prevNode == null ? void 0 : prevNode.name) === "Column") {
-    return (0, import_vuu_codemirror5.getValue)(prevNode, state);
-  } else if ((prevNode == null ? void 0 : prevNode.name) === "Operator") {
-    return getColumnName(prevNode, state);
+var removeFilter = (sourceFilter, filterToRemove) => {
+  if (filterEquals(sourceFilter, filterToRemove, true)) {
+    return null;
   }
-};
-var getSetValues = (node, state) => {
-  let maybeTargetNode = node.lastChild;
-  const values = [];
-  while (maybeTargetNode && maybeTargetNode.name !== "In") {
-    const value = (0, import_vuu_codemirror5.getValue)(maybeTargetNode, state);
-    if (value) {
-      values.push(value);
-    } else {
-      break;
-    }
-    maybeTargetNode = maybeTargetNode.prevSibling;
+  if (sourceFilter.op !== AND) {
+    throw Error(
+      `removeFilter cannot remove ${JSON.stringify(
+        filterToRemove
+      )} from ${JSON.stringify(sourceFilter)}`
+    );
   }
-  return values;
+  const filters = sourceFilter.filters.filter(
+    (f) => !filterEquals(f, filterToRemove)
+  );
+  return filters.length > 0 ? { type: AND, filters } : null;
 };
-var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = (0, import_react.useCallback)(
-    async (context, suggestionType, optionalArgs = {}) => {
-      const { startsWith = "" } = optionalArgs;
-      const options = await suggestionProvider.getSuggestions(
-        suggestionType,
-        optionalArgs
-      );
-      return { from: context.pos - startsWith.length, options };
-    },
-    [suggestionProvider]
+var splitFilterOnColumn = (filter, columnName) => {
+  if (!filter) {
+    return [null, null];
+  }
+  if (filter.column === columnName) {
+    return [filter, null];
+  }
+  if (filter.op !== AND) {
+    return [null, filter];
+  }
+  const [[columnFilter = null], filters] = (0, import_vuu_utils.partition)(
+    filter.filters,
+    (f) => f.column === columnName
   );
-  return (0, import_react.useCallback)(
-    async (context) => {
-      var _a, _b;
-      const { state, pos } = context;
-      const word = (_a = context.matchBefore(/\w*/)) != null ? _a : {
-        from: 0,
-        to: 0,
-        text: void 0
-      };
-      const tree = (0, import_vuu_codemirror5.syntaxTree)(state);
-      const nodeBefore = tree.resolveInner(pos, -1);
-      console.log({ nodeBeforeName: nodeBefore.name });
-      switch (nodeBefore.name) {
-        case "Filter":
-          if (context.pos === 0) {
-            return makeSuggestions(context, "column");
-          } else {
-            const clauseOperator = getClauseOperator(nodeBefore, state);
-            if (clauseOperator === "as") {
-              return makeSuggestions(context, "name");
-            } else {
-              const filterName = getFilterName(nodeBefore, state);
-              return makeSuggestions(context, "save", {
-                onSubmit: onSubmit.current,
-                existingFilter,
-                filterName
-              });
-            }
-          }
-        case "String":
-          {
-            const operator = getOperator(nodeBefore, state);
-            const columnName = getColumnName(nodeBefore, state);
-            const { from, to } = nodeBefore;
-            if (to - from === 2 && context.pos === from + 1) {
-              if (columnName && operator) {
-                return makeSuggestions(context, "columnValue", {
-                  columnName,
-                  operator,
-                  quoted: true,
-                  startsWith: word.text
-                });
-              }
-            } else {
-              console.log(
-                `we have a string, column is ${columnName} ${from} ${to}`
-              );
-            }
-          }
-          break;
-        case "As":
-          return makeSuggestions(context, "name");
-        case "FilterName":
-          return makeSuggestions(context, "save", {
-            onSubmit: onSubmit.current,
-            existingFilter,
-            filterName: getFilterName(nodeBefore, state)
-          });
-        case "Column": {
-          const columnName = (0, import_vuu_codemirror5.getValue)(nodeBefore, state);
-          const isPartialMatch = await suggestionProvider.isPartialMatch(
-            "column",
-            void 0,
-            columnName
-          );
-          if (isPartialMatch) {
-            return makeSuggestions(context, "column", {
-              startsWith: columnName
-            });
-          } else {
-            return makeSuggestions(context, "operator", { columnName });
-          }
-        }
-        case "\u26A0": {
-          const columnName = (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state);
-          const operator = getOperator(nodeBefore, state);
-          const partialOperator = operator ? void 0 : getPartialOperator(nodeBefore, state, columnName);
-          if (partialOperator) {
-            return makeSuggestions(context, "operator", {
-              columnName,
-              startsWith: partialOperator
-            });
-          } else {
-            return makeSuggestions(context, "columnValue", {
-              columnName,
-              operator,
-              startsWith: word.text
-            });
-          }
-        }
-        case "Identifier":
-          {
-            const clauseOperator = getClauseOperator(nodeBefore, state);
-            if (clauseOperator === "as") {
-              return {
-                from: context.pos,
-                options: [
-                  {
-                    label: "press ENTER to apply filter and save",
-                    apply: () => onSubmit.current(),
-                    boost: 5
-                  }
-                ]
-              };
-            }
-          }
-          break;
-        case "ColumnSetExpression":
-        case "Values": {
-          const columnName = (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state);
-          const selection = getSetValues(nodeBefore, state);
-          return makeSuggestions(context, "columnValue", {
-            columnName,
-            selection
-          });
-        }
-        case "Comma":
-        case "LBrack": {
-          const columnName = (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state);
-          return makeSuggestions(context, "columnValue", { columnName });
-        }
-        case "ColumnValueExpression":
-          {
-            const lastToken = (_b = nodeBefore.lastChild) == null ? void 0 : _b.prevSibling;
-            if ((lastToken == null ? void 0 : lastToken.name) === "Column") {
-              return makeSuggestions(context, "operator", {
-                columnName: (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state)
-              });
-            } else if ((lastToken == null ? void 0 : lastToken.name) === "Operator") {
-              return makeSuggestions(context, "columnValue", {
-                columnName: (0, import_vuu_codemirror5.getNodeByName)(lastToken, state),
-                operator: (0, import_vuu_codemirror5.getValue)(lastToken, state)
-              });
-            }
-          }
-          break;
-        case "In": {
-          return {
-            from: context.pos,
-            options: [{ label: "[", apply: " [", type: "text" }]
-          };
-        }
-        case "Eq": {
-          return makeSuggestions(context, "columnValue", {
-            columnName: (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state)
-          });
-        }
-        case "AndExpression":
-        case "OrExpression": {
-          return makeSuggestions(context, "column");
-        }
-        default:
+  return filters.length === 1 ? [columnFilter, filters[0]] : [columnFilter, { op: AND, filters }];
+};
+var overrideColName = (filter, column) => {
+  if (isMultiClauseFilter(filter)) {
+    return {
+      op: filter.op,
+      filters: filter.filters.map((f) => overrideColName(f, column))
+    };
+  }
+  return { ...filter, column };
+};
+var filterIncludesColumn = (filter, column) => {
+  if (!filter) {
+    return false;
+  }
+  const { op, column: filterColName } = filter;
+  switch (op) {
+    case AND:
+    case OR:
+      return filter.filters != null && filter.filters.some((f) => filterIncludesColumn(f, column));
+    default:
+      return filterColName === column.name;
+  }
+};
+var removeFilterForColumn = (sourceFilter, column) => {
+  const colName = column.name;
+  if (!sourceFilter) {
+    return void 0;
+  }
+  if (sourceFilter.column === colName) {
+    return void 0;
+  }
+  if (isAndFilter(sourceFilter) || isOrFilter(sourceFilter)) {
+    const { op } = sourceFilter;
+    const filters = sourceFilter.filters;
+    const otherColFilters = filters.filter((f) => f.column !== colName);
+    switch (otherColFilters.length) {
+      case 0:
+        return void 0;
+      case 1:
+        return otherColFilters[0];
+      default:
+        return { op, filters: otherColFilters };
+    }
+  }
+  return sourceFilter;
+};
+var canMerge = (f1, f2) => f1.column === f2.column && (f1.op === "=" || f1.op === "in") && (f2.op === "=" || f2.op === "in");
+var sameValues = (arr1, arr2) => {
+  if (arr1 === arr2) {
+    return true;
+  }
+  if (arr1.length === arr2.length) {
+    const a = arr1.slice().sort();
+    const b = arr2.slice().sort();
+    return a.join("|") === b.join("|");
+  }
+  return false;
+};
+var filterEquals = (f1, f2, strict = false) => {
+  if (!strict) {
+    return true;
+  }
+  if (f1 && f2 && canMerge(f1, f2)) {
+    return f1.op === f2.op && (isSingleValueFilter(f1) && isSingleValueFilter(f2) && f1.value === f2.value || isMultiValueFilter(f1) && isMultiValueFilter(f2) && sameValues(f1.values, f2.values));
+  }
+  return false;
+};
+var updateFilter = (filter, newFilter, mode) => {
+  if (filter && newFilter) {
+    if (mode === "replace") {
+      return newFilter;
+    }
+    if (filter.op === "and") {
+      return {
+        ...filter,
+        filters: filter.filters.concat(newFilter)
+      };
+    }
+    const { column: columnName } = newFilter;
+    if (columnName) {
+      const existingClause = newFilter.column ? (0, import_vuu_utils.extractFilterForColumn)(filter, columnName) : void 0;
+      if (existingClause && columnName) {
+        const result = removeFilterForColumn(filter, { name: columnName });
+        return updateFilter(result, newFilter, "add");
       }
-    },
-    [existingFilter, makeSuggestions, onSubmit, suggestionProvider]
-  );
+    }
+    return {
+      op: "and",
+      filters: [filter, newFilter]
+    };
+  }
+  if (newFilter) {
+    return newFilter;
+  }
+  return filter;
 };
 
-// src/filter-input/useCodeMirrorEditor.ts
-var getView = (ref) => {
-  if (ref.current == void 0) {
-    throw Error("EditorView not defined");
+// src/column-filter/utils.ts
+var isStartsWithValue = (value) => /\.\.\.$/.test(value);
+var getTypeaheadFilter = (column, filterValues, isStartsWithFilter) => {
+  if (filterValues.length === 0) {
+    return void 0;
   }
-  return ref.current;
+  if (isStartsWithFilter) {
+    const startsWith = filterValues[0].substring(0, filterValues[0].length - 3);
+    return {
+      column,
+      op: "starts",
+      value: `"${startsWith}"`
+    };
+  }
+  return {
+    column,
+    op: "in",
+    values: filterValues.map((value) => `"${value}"`)
+  };
 };
-var getOptionClass = (completion) => {
-  return (0, import_classnames.default)("vuuSuggestion", {
-    vuuIllustration: completion.isIllustration
-  });
+var getRangeFilter = (column, startValue, endValue) => {
+  const startFilter = startValue === void 0 ? void 0 : { column, op: ">", value: startValue - 1 };
+  const endFilter = endValue === void 0 ? void 0 : { column, op: "<", value: endValue + 1 };
+  if (endFilter === void 0)
+    return startFilter;
+  return addFilter(startFilter, endFilter, { combineWith: "and" });
 };
-var stripName = (filterQuery) => {
-  const pos = filterQuery.lastIndexOf(" as ");
-  if (pos !== -1) {
-    return filterQuery.slice(0, pos);
-  } else {
-    return filterQuery;
-  }
+
+// src/column-filter/RangeFilter.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RangeFilter = ({
+  defaultTypeaheadParams,
+  filterValues,
+  onChange
+}) => {
+  var _a, _b;
+  const columnName = defaultTypeaheadParams[1];
+  const startChangeHandler = (e) => {
+    const value = parseFloat(e.target.value);
+    const newRange = {
+      start: isNaN(value) ? void 0 : value,
+      end: filterValues == null ? void 0 : filterValues.end
+    };
+    const filter = getRangeFilter(columnName, newRange.start, newRange.end);
+    onChange(newRange, filter);
+  };
+  const endChangeHandler = (e) => {
+    const value = parseFloat(e.target.value);
+    const newRange = {
+      start: filterValues == null ? void 0 : filterValues.start,
+      end: isNaN(value) ? void 0 : value
+    };
+    const filter = getRangeFilter(columnName, newRange.start, newRange.end);
+    onChange(newRange, filter);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_salt_lab.ToolbarField, { label: "From", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_salt_lab.Input,
+      {
+        onChange: startChangeHandler,
+        value: ((_a = filterValues == null ? void 0 : filterValues.start) == null ? void 0 : _a.toString()) || "",
+        type: "number"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_salt_lab.ToolbarField, { label: "To", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_salt_lab.Input,
+      {
+        onChange: endChangeHandler,
+        value: ((_b = filterValues == null ? void 0 : filterValues.end) == null ? void 0 : _b.toString()) || "",
+        type: "number"
+      }
+    ) })
+  ] });
+};
+
+// src/column-filter/TypeaheadFilter.tsx
+var import_react3 = require("react");
+var import_vuu_data = require("@vuu-ui/vuu-data");
+var import_salt_lab2 = require("@heswell/salt-lab");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TypeaheadFilter = ({
+  defaultTypeaheadParams,
+  filterValues = [],
+  onChange: onFilterChange
+}) => {
+  const [tableName, columnName] = defaultTypeaheadParams;
+  const [searchValue, setSearchValue] = (0, import_react3.useState)("");
+  const [typeaheadValues, setTypeaheadValues] = (0, import_react3.useState)([]);
+  const getSuggestions = (0, import_vuu_data.useTypeaheadSuggestions)();
+  (0, import_react3.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 = (0, import_react3.useCallback)(
+    (evt) => {
+      const value = evt.target.value;
+      setSearchValue(value);
+    },
+    []
+  );
+  const onSelectionChange = (0, import_react3.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__ */ (0, import_jsx_runtime4.jsx)(
+    import_salt_lab2.ComboBoxDeprecated,
+    {
+      multiSelect: true,
+      onInputChange,
+      onChange: onSelectionChange,
+      source: typeaheadValues,
+      style: { minWidth: 200 },
+      inputValue: searchValue,
+      selectedItem: filterValues
+    },
+    columnName
+  );
+};
+
+// src/column-filter/ColumnListItem.tsx
+var import_react4 = require("react");
+var import_salt_lab3 = require("@heswell/salt-lab");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ColumnListItem = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MemoColumnItem, { ...props });
+};
+var MemoColumnItem = (0, import_react4.memo)(function MemoizedItem({
+  item,
+  itemTextHighlightPattern,
+  ...restProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab3.ListItem, { ...restProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { marginLeft: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_salt_lab3.Highlighter,
+    {
+      matchPattern: itemTextHighlightPattern,
+      text: item == null ? void 0 : item.name
+    }
+  ) }) });
+});
+
+// src/column-filter/useColumnFilterStore.ts
+var import_react5 = require("react");
+var addOrReplace = (array, newValue, key) => array.filter((oldValue) => oldValue[key] !== newValue[key]).concat(newValue);
+var useColumnFilterStore = (onFilterSubmit) => {
+  var _a, _b;
+  const [selectedColumnName, setSelectedColumnName] = (0, import_react5.useState)("");
+  const [savedFilters, setSavedFilters] = (0, import_react5.useState)([]);
+  const [rangeValues, setRangeValues] = (0, import_react5.useState)([]);
+  const [typeaheadValues, setTypeaheadValues] = (0, import_react5.useState)([]);
+  const clear = () => {
+    setSelectedColumnName("");
+    setRangeValues([]);
+    setTypeaheadValues([]);
+    setSavedFilters([]);
+    onFilterSubmit("");
+  };
+  const updateFilters = (0, import_react5.useCallback)(
+    (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 ? "" : filterAsQuery(combinedFilter);
+      onFilterSubmit(query, combinedFilter);
+    },
+    [selectedColumnName, onFilterSubmit, savedFilters]
+  );
+  const onTypeaheadChange = (0, import_react5.useCallback)(
+    (newValues, newFilter) => {
+      setTypeaheadValues(
+        addOrReplace(
+          typeaheadValues,
+          { column: selectedColumnName, value: newValues },
+          "column"
+        )
+      );
+      updateFilters(newFilter);
+    },
+    [selectedColumnName, typeaheadValues, updateFilters]
+  );
+  const onRangeChange = (0, import_react5.useCallback)(
+    (newValues, newFilter) => {
+      setRangeValues(
+        addOrReplace(
+          rangeValues,
+          { column: selectedColumnName, value: newValues },
+          "column"
+        )
+      );
+      updateFilters(newFilter);
+    },
+    [selectedColumnName, rangeValues, updateFilters]
+  );
+  const onSelectedColumnChange = (0, import_react5.useCallback)(
+    (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
+  };
 };
-var noop = () => console.log("noooop");
-var useCodeMirrorEditor = ({
-  existingFilter,
-  onSubmitFilter,
-  suggestionProvider
+
+// src/column-filter/ColumnFilter.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ColumnFilter = ({
+  className,
+  table,
+  columns,
+  onFilterSubmit,
+  ...htmlAttributes
 }) => {
-  const editorRef = (0, import_react2.useRef)(null);
-  const onSubmit = (0, import_react2.useRef)(noop);
-  const viewRef = (0, import_react2.useRef)();
-  const completionFn = useAutoComplete(
-    suggestionProvider,
-    onSubmit,
-    existingFilter
-  );
-  const [createState, clearInput] = (0, import_react2.useMemo)(() => {
-    const parseFilter2 = () => {
-      const view = getView(viewRef);
-      const source = view.state.doc.toString();
-      const tree = (0, import_vuu_codemirror6.ensureSyntaxTree)(view.state, view.state.doc.length, 5e3);
-      if (tree) {
-        const filter = walkTree(tree, source);
-        return [filter, stripName(source), filter.name];
-      } else {
-        return [void 0, "", void 0];
-      }
-    };
-    const clearInput2 = () => {
-      getView(viewRef).setState(createState2());
-    };
-    const submitFilterAndClearInput = (mode) => {
-      const [filter, filterQuery, filterName] = parseFilter2();
-      onSubmitFilter == null ? void 0 : onSubmitFilter(filter, filterQuery, mode, filterName);
-      clearInput2();
-    };
-    const submitFilter = (key) => {
-      return import_vuu_codemirror6.keymap.of([
-        {
-          key,
-          run() {
-            submitFilterAndClearInput();
-            return true;
+  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__ */ (0, import_jsx_runtime6.jsx)(
+          import_salt_lab4.ToolbarField,
+          {
+            label: "Start typing to select a filter",
+            labelPlacement: "top",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              TypeaheadFilter,
+              {
+                defaultTypeaheadParams,
+                filterValues: typeaheadValue,
+                onChange: onTypeaheadChange
+              }
+            )
           }
-        }
-      ]);
-    };
-    const showSuggestions = (key) => {
-      return import_vuu_codemirror6.keymap.of([
-        {
-          key,
-          run() {
-            (0, import_vuu_codemirror6.startCompletion)(getView(viewRef));
-            return true;
+        );
+      case "int":
+      case "long":
+      case "double":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarField, { label: "Select a range", labelPlacement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          RangeFilter,
+          {
+            defaultTypeaheadParams,
+            filterValues: rangeValue,
+            onChange: onRangeChange
           }
-        }
-      ]);
-    };
-    const createState2 = () => import_vuu_codemirror6.EditorState.create({
-      doc: "",
-      extensions: [
-        import_vuu_codemirror6.minimalSetup,
-        (0, import_vuu_codemirror6.autocompletion)({
-          override: [completionFn],
-          optionClass: getOptionClass
-        }),
-        filterLanguageSupport(),
-        import_vuu_codemirror6.keymap.of(import_vuu_codemirror6.defaultKeymap),
-        submitFilter("Ctrl-Enter"),
-        showSuggestions("ArrowDown"),
-        import_vuu_codemirror6.EditorView.updateListener.of((v) => {
-          const view = getView(viewRef);
-          if (v.docChanged) {
-            (0, import_vuu_codemirror6.startCompletion)(view);
+        ) });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarField, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.Text, { children: "Data type unsupported" }) });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_salt_lab4.Toolbar,
+    {
+      ...htmlAttributes,
+      style: { alignItems: "center", height: "36px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_salt_lab4.ToolbarField,
+          {
+            label: "Select a column to filter",
+            labelPlacement: "top",
+            style: { width: 180 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_salt_lab4.Dropdown,
+              {
+                source: columns,
+                ListItem: ColumnListItem,
+                itemToString: (column) => column.name,
+                onSelectionChange: (_evt, column) => onSelectedColumnChange(column)
+              }
+            )
           }
-        }),
-        import_vuu_codemirror6.EditorState.transactionFilter.of(
-          (tr) => tr.newDoc.lines > 1 ? [] : tr
         ),
-        vuuTheme,
-        vuuHighlighting
+        selectedColumnName && getFilterComponent(),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarButton, { onClick: clear, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DeleteIcon, {}) })
       ]
-    });
-    onSubmit.current = (mode) => {
-      submitFilterAndClearInput(mode);
-      setTimeout(() => {
-        getView(viewRef).focus();
-      }, 100);
-    };
-    return [createState2, clearInput2];
-  }, [completionFn, onSubmitFilter]);
-  (0, import_react2.useEffect)(() => {
-    if (!editorRef.current) {
-      throw Error("editor not in dom");
     }
-    viewRef.current = new import_vuu_codemirror6.EditorView({
-      state: createState(),
-      parent: editorRef.current
-    });
-    return () => {
-      var _a;
-      (_a = viewRef.current) == null ? void 0 : _a.destroy();
-    };
-  }, [completionFn, createState]);
-  return { editorRef, clearInput };
+  );
 };
 
 // src/filter-input/FilterInput.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var classBase = "vuuFilterInput";
-var FilterInput = ({
-  existingFilter,
-  iconName = "filter",
-  namedFilters,
-  onSubmitFilter,
-  suggestionProvider,
-  ...props
-}) => {
-  const { editorRef, clearInput } = useCodeMirrorEditor({
-    existingFilter,
-    onSubmitFilter,
-    suggestionProvider
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...props, className: classBase, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.Button,
-      {
-        className: `${classBase}-FilterButton`,
-        "data-icon": iconName,
-        tabIndex: -1
+var import_core2 = require("@salt-ds/core");
+
+// src/filter-input/useCodeMirrorEditor.ts
+var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
+var import_classnames = __toESM(require_classnames(), 1);
+var import_react7 = require("react");
+
+// src/filter-input/filter-language-parser/FilterLanguage.ts
+var import_vuu_codemirror2 = require("@vuu-ui/vuu-codemirror");
+
+// src/filter-input/filter-language-parser/generated/filter-parser.js
+var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
+var parser = import_vuu_codemirror.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
+});
+
+// src/filter-input/filter-language-parser/FilterLanguage.ts
+var filterLanguage = import_vuu_codemirror2.LRLanguage.define({
+  name: "VuuFilterQuery",
+  parser: parser.configure({
+    props: [
+      (0, import_vuu_codemirror2.styleTags)({
+        Identifier: import_vuu_codemirror2.tags.variableName,
+        String: import_vuu_codemirror2.tags.string,
+        Or: import_vuu_codemirror2.tags.emphasis,
+        Operator: import_vuu_codemirror2.tags.operator
+      })
+    ]
+  })
+});
+var filterLanguageSupport = () => {
+  return new import_vuu_codemirror2.LanguageSupport(filterLanguage);
+};
+
+// src/filter-input/filter-language-parser/FilterTreeWalker.ts
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var _filter;
+var FilterExpression = class {
+  constructor() {
+    __privateAdd(this, _filter, void 0);
+  }
+  setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
+    if ((0, import_vuu_utils2.isMultiClauseFilter)(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 ((0, import_vuu_utils2.isMultiClauseFilter)(__privateGet(this, _filter))) {
+      __privateGet(this, _filter).filters.push(filter);
+    } else {
+      throw Error(`Invalid filter passed to FilterExpression`);
+    }
+  }
+  setColumn(column, filter = __privateGet(this, _filter)) {
+    if ((0, import_vuu_utils2.isMultiClauseFilter)(filter)) {
+      const target = filter.filters.at(-1);
+      if (target) {
+        this.setColumn(column, target);
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${classBase}-Editor`, ref: editorRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.Button,
-      {
-        className: `${classBase}-ClearButton`,
-        "data-icon": "close-circle",
-        onClick: clearInput
+    } else if (filter) {
+      filter.column = column;
+    }
+  }
+  setOp(value, filter = __privateGet(this, _filter)) {
+    if ((0, import_vuu_utils2.isMultiClauseFilter)(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 ((0, import_vuu_utils2.isMultiClauseFilter)(filter)) {
+      const target = filter.filters.at(-1);
+      if (target) {
+        this.setValue(value, target);
+      }
+    } else if ((0, import_vuu_utils2.isMultiValueFilter)(filter)) {
+      (_a = filter.values) != null ? _a : filter.values = [];
+      filter.values.push(value);
+    } else if ((0, import_vuu_utils2.isSingleValueFilter)(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();
 };
 
-// src/filter-input/useFilterSuggestionProvider.ts
-var import_vuu_codemirror7 = require("@vuu-ui/vuu-codemirror");
-var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_react3 = require("react");
-
-// src/filter-input/filterInfo.ts
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var filterInfo = (filterName, filterQuery) => {
-  const rootElement = (0, import_vuu_utils2.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils2.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils2.createEl)("span", "function-name", filterName);
-  headingElement.appendChild(nameElement);
-  const child2 = (0, import_vuu_utils2.createEl)("p", void 0, filterQuery);
-  rootElement.appendChild(headingElement);
-  rootElement.appendChild(child2);
-  return rootElement;
+// src/filter-input/filter-language-parser/FilterParser.ts
+var strictParser = parser.configure({ strict: true });
+var parseFilter = (filterQuery) => {
+  const parseTree = strictParser.parse(filterQuery);
+  const filter = walkTree(parseTree, filterQuery);
+  return filter;
 };
 
-// src/filter-input/useFilterSuggestionProvider.ts
-var NO_NAMED_FILTERS = [];
-var NONE = {};
-var saveAsTab = (onSubmit) => [
+// src/filter-input/highlighting.ts
+var import_vuu_codemirror3 = require("@vuu-ui/vuu-codemirror");
+var myHighlightStyle = import_vuu_codemirror3.HighlightStyle.define([
+  { tag: import_vuu_codemirror3.tags.variableName, color: "var(--vuuFilterEditor-variableColor)" },
+  { tag: import_vuu_codemirror3.tags.comment, color: "green", fontStyle: "italic" }
+]);
+var vuuHighlighting = (0, import_vuu_codemirror3.syntaxHighlighting)(myHighlightStyle);
+
+// src/filter-input/theme.ts
+var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
+var vuuTheme = import_vuu_codemirror4.EditorView.theme(
   {
-    label: "Press ENTER to create TAB",
-    apply: () => onSubmit("tab"),
-    boost: 6
-  }
-];
-var makeSaveOrExtendSuggestions = (onSubmit, existingFilter, withJoinSuggestions = true) => {
-  const result = existingFilter ? [
-    {
-      label: "REPLACE existing filter",
-      apply: () => onSubmit("replace"),
-      boost: 8
+    "&": {
+      color: "var(--vuuFilterEditor-color)",
+      backgroundColor: "var(--vuuFilterEditor-background)",
+      fontSize: "var(--vuuFilterEditor-fontSize)"
     },
-    {
-      label: "AND existing filter",
-      apply: () => onSubmit("and"),
-      boost: 7
+    ".cm-content": {
+      caretColor: "var(--vuuFilterEditor-cursorColor)",
+      padding: 0
     },
-    {
-      label: "OR existing filter",
-      apply: () => onSubmit("or"),
-      boost: 7
-    }
-  ] : [
-    {
-      label: "Press ENTER to submit",
-      apply: () => onSubmit(),
-      boost: 6
+    ".cm-line": {
+      lineHeight: "var(--vuuFilterEditor-lineHeight)"
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-scroller": {
+      fontFamily: "var(--vuuFilterEditor-fontFamily)"
+    },
+    ".cm-tooltip": {
+      background: "var(--vuuFilterEditor-tooltipBackground)",
+      border: "var(--vuuFilterEditor-tooltipBorder)",
+      boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
+      "&.cm-tooltip-autocomplete > ul": {
+        fontFamily: "var(--vuuFilterEditor-fontFamily)",
+        fontSize: "var(--vuuFilterEditor-fontSize)",
+        maxHeight: "240px"
+      },
+      "&.cm-tooltip-autocomplete > ul > li": {
+        alignItems: "center",
+        display: "flex",
+        height: "var(--vuuFilterEditor-suggestion-height)",
+        padding: "0 3px",
+        lineHeight: "var(--vuuFilterEditor-suggestion-height)"
+      },
+      "&.cm-tooltip-autocomplete li[aria-selected]": {
+        background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
+        color: "var(--vuuFilterEditor-suggestion-selectedColor)"
+      }
+    },
+    ".cm-completionIcon": {
+      height: "18px",
+      flex: "0 0 16px"
+    },
+    ".cm-completionLabel": {
+      flex: "1 1 auto"
+    },
+    ".cm-completionIcon-filter": {
+      position: "relative",
+      "&:after": {
+        background: "var(--salt-text-secondary-foreground)",
+        content: "''",
+        "-webkit-mask": "var(--svg-filter) center center/13px 13px",
+        "-webkit-mask-repeat": "no-repeat",
+        position: "absolute",
+        height: "18px",
+        left: "0px",
+        top: "0px",
+        width: "16px"
+      }
     }
-  ];
-  return withJoinSuggestions ? result.concat(import_vuu_codemirror7.booleanJoinSuggestions).concat(import_vuu_codemirror7.asNameSuggestion) : result;
+  },
+  { dark: false }
+);
+
+// src/filter-input/useFilterAutoComplete.ts
+var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
+var import_react6 = require("react");
+var getOperator = (node, state) => {
+  let maybeColumnNode = node.prevSibling || node.parent;
+  while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
+    maybeColumnNode = maybeColumnNode.prevSibling || maybeColumnNode.parent;
+  }
+  if ((maybeColumnNode == null ? void 0 : maybeColumnNode.name) === "In" || (maybeColumnNode == null ? void 0 : maybeColumnNode.name) === "Operator") {
+    return (0, import_vuu_codemirror5.getValue)(maybeColumnNode, state);
+  } else {
+    return void 0;
+  }
 };
-var promptToSaveOrExtend = (onSubmit, existingFilter) => makeSaveOrExtendSuggestions(onSubmit, existingFilter, true);
-var promptToSave = (onSubmit) => makeSaveOrExtendSuggestions(onSubmit, void 0);
-var getSaveSuggestions = ({
-  existingFilter,
-  filterName,
-  onSubmit,
-  saveOptions
-}) => {
-  const includeTabSuggestion = filterName && saveOptions.allowSaveAsTab;
-  const result = existingFilter ? promptToSaveOrExtend(onSubmit, existingFilter) : promptToSave(onSubmit);
-  if (includeTabSuggestion) {
-    return result.concat(saveAsTab(onSubmit));
+var getPartialOperator = (maybeOperatorNode, state, columnName) => {
+  const value = (0, import_vuu_codemirror5.getValue)(maybeOperatorNode, state);
+  if (columnName === void 0 || value === columnName) {
+    return;
+  }
+  if (["contains", "ends", "starts"].some(
+    (val) => val.startsWith(value.toLowerCase())
+  )) {
+    return value;
   } else {
-    return result;
+    return void 0;
   }
 };
-var suggestColumns = (columns) => columns.map((column) => ({
-  boost: 5,
-  label: column.name
-}));
-var suggestNamedFilters = (namedFilters) => namedFilters ? Array.from(namedFilters.entries()).map(([filterName, filterQuery]) => ({
-  info: () => filterInfo(filterName, filterQuery),
-  label: filterName,
-  type: "filter"
-})) : NO_NAMED_FILTERS;
-var doneCommand = {
-  label: "Done",
-  apply: "] ",
-  type: "keyword",
-  boost: 10
+var getClauseOperator = (node, state) => {
+  let maybeTargetNode = node.prevSibling || node.parent || node.lastChild;
+  while (maybeTargetNode && maybeTargetNode.name === "\u26A0")
+    maybeTargetNode = maybeTargetNode.prevSibling;
+  if (maybeTargetNode && ["As", "Or", "And"].includes(maybeTargetNode.name)) {
+    return (0, import_vuu_codemirror5.getValue)(maybeTargetNode, state);
+  } else {
+    return void 0;
+  }
 };
-var withApplySpace = (suggestions, startsWith = "") => suggestions.filter((sugg) => startsWith === "" || sugg.label.startsWith(startsWith)).map((suggestion) => ({
-  ...suggestion,
-  apply: suggestion.label + " "
-}));
-var defaultSaveOptions = {
-  allowReplace: true
+var getFilterName = (node, state) => {
+  if (node.name === "FilterName") {
+    return (0, import_vuu_codemirror5.getValue)(node, state);
+  } else {
+    let maybeTargetNode = node.prevSibling || node.parent || node.lastChild;
+    while (maybeTargetNode && maybeTargetNode.name !== "FilterName")
+      maybeTargetNode = maybeTargetNode.prevSibling;
+    if (maybeTargetNode && maybeTargetNode.name === "FilterName") {
+      return (0, import_vuu_codemirror5.getValue)(node, state);
+    }
+  }
 };
-var useFilterSuggestionProvider = ({
-  columns,
-  namedFilters,
-  saveOptions = defaultSaveOptions,
-  table
-}) => {
-  const latestSuggestionsRef = (0, import_react3.useRef)();
-  const getTypeaheadSuggestions = (0, import_vuu_data.useTypeaheadSuggestions)();
-  const getSuggestions = (0, import_react3.useCallback)(
-    async (suggestionType, options = NONE) => {
-      const {
-        columnName,
-        existingFilter,
-        filterName,
-        operator,
-        quoted: autoQuoted,
-        onSubmit,
-        startsWith,
-        selection
-      } = options;
-      switch (suggestionType) {
-        case "operator":
+var getColumnName = (node, state) => {
+  const prevNode = node.prevSibling;
+  if ((prevNode == null ? void 0 : prevNode.name) === "Column") {
+    return (0, import_vuu_codemirror5.getValue)(prevNode, state);
+  } else if ((prevNode == null ? void 0 : prevNode.name) === "Operator") {
+    return getColumnName(prevNode, state);
+  }
+};
+var getSetValues = (node, state) => {
+  let maybeTargetNode = node.lastChild;
+  const values = [];
+  while (maybeTargetNode && maybeTargetNode.name !== "In") {
+    const value = (0, import_vuu_codemirror5.getValue)(maybeTargetNode, state);
+    if (value) {
+      values.push(value);
+    } else {
+      break;
+    }
+    maybeTargetNode = maybeTargetNode.prevSibling;
+  }
+  return values;
+};
+var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
+  const makeSuggestions = (0, import_react6.useCallback)(
+    async (context, suggestionType, optionalArgs = {}) => {
+      const { startsWith = "" } = optionalArgs;
+      const options = await suggestionProvider.getSuggestions(
+        suggestionType,
+        optionalArgs
+      );
+      return { from: context.pos - startsWith.length, options };
+    },
+    [suggestionProvider]
+  );
+  return (0, import_react6.useCallback)(
+    async (context) => {
+      var _a, _b;
+      const { state, pos } = context;
+      const word = (_a = context.matchBefore(/\w*/)) != null ? _a : {
+        from: 0,
+        to: 0,
+        text: void 0
+      };
+      const tree = (0, import_vuu_codemirror5.syntaxTree)(state);
+      const nodeBefore = tree.resolveInner(pos, -1);
+      console.log({ nodeBeforeName: nodeBefore.name });
+      switch (nodeBefore.name) {
+        case "Filter":
+          if (context.pos === 0) {
+            return makeSuggestions(context, "column");
+          } else {
+            const clauseOperator = getClauseOperator(nodeBefore, state);
+            if (clauseOperator === "as") {
+              return makeSuggestions(context, "name");
+            } else {
+              const filterName = getFilterName(nodeBefore, state);
+              return makeSuggestions(context, "save", {
+                onSubmit: onSubmit.current,
+                existingFilter,
+                filterName
+              });
+            }
+          }
+        case "String":
           {
-            const column = columns.find((col) => col.name === columnName);
-            if (column) {
-              switch (column.serverDataType) {
-                case "string":
-                case "char":
-                  return withApplySpace(import_vuu_codemirror7.stringOperators, startsWith);
-                case "int":
-                case "long":
-                case "double":
-                  return withApplySpace(import_vuu_codemirror7.numericOperators);
+            const operator = getOperator(nodeBefore, state);
+            const columnName = getColumnName(nodeBefore, state);
+            const { from, to } = nodeBefore;
+            if (to - from === 2 && context.pos === from + 1) {
+              if (columnName && operator) {
+                return makeSuggestions(context, "columnValue", {
+                  columnName,
+                  operator,
+                  quoted: true,
+                  startsWith: word.text
+                });
               }
             } else {
-              console.warn(`'${columnName}' does not match any column name`);
+              console.log(
+                `we have a string, column is ${columnName} ${from} ${to}`
+              );
             }
           }
           break;
-        case "column": {
-          const columnSuggestions = await suggestColumns(columns);
-          const filterSuggestions = await suggestNamedFilters(namedFilters);
-          return (latestSuggestionsRef.current = withApplySpace(columnSuggestions)).concat(
-            withApplySpace(filterSuggestions)
+        case "As":
+          return makeSuggestions(context, "name");
+        case "FilterName":
+          return makeSuggestions(context, "save", {
+            onSubmit: onSubmit.current,
+            existingFilter,
+            filterName: getFilterName(nodeBefore, state)
+          });
+        case "Column": {
+          const columnName = (0, import_vuu_codemirror5.getValue)(nodeBefore, state);
+          const isPartialMatch = await suggestionProvider.isPartialMatch(
+            "column",
+            void 0,
+            columnName
           );
+          if (isPartialMatch) {
+            return makeSuggestions(context, "column", {
+              startsWith: columnName
+            });
+          } else {
+            return makeSuggestions(context, "operator", { columnName });
+          }
         }
-        case "columnValue":
+        case "\u26A0": {
+          const columnName = (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state);
+          const operator = getOperator(nodeBefore, state);
+          const partialOperator = operator ? void 0 : getPartialOperator(nodeBefore, state, columnName);
+          if (partialOperator) {
+            return makeSuggestions(context, "operator", {
+              columnName,
+              startsWith: partialOperator
+            });
+          } else {
+            return makeSuggestions(context, "columnValue", {
+              columnName,
+              operator,
+              startsWith: word.text
+            });
+          }
+        }
+        case "Identifier":
           {
-            if (columnName) {
-              const column = columns.find((col) => col.name === columnName);
-              if (!column) {
-                throw Error(
-                  `useFilterSUggestionProvider no column ${columnName}`
-                );
-              }
-              const prefix = Array.isArray(selection) ? selection.length === 0 ? "[" : "," : "";
-              const params = (0, import_vuu_data.getTypeaheadParams)(
-                table,
-                columnName,
-                startsWith
-              );
-              const suggestions = await getTypeaheadSuggestions(params);
-              const isIllustration = operator === "starts";
-              latestSuggestionsRef.current = (0, import_vuu_codemirror7.toSuggestions)(suggestions, {
-                moveCursorToEnd: autoQuoted,
-                quoted: (column == null ? void 0 : column.serverDataType) === "string" && !autoQuoted,
-                suffix: autoQuoted ? "" : " ",
-                prefix: isIllustration ? startsWith : prefix,
-                isIllustration
-              });
-              if (Array.isArray(selection) && (selection == null ? void 0 : selection.length) > 1) {
-                return [doneCommand, ...latestSuggestionsRef.current];
-              }
-              return latestSuggestionsRef.current;
+            const clauseOperator = getClauseOperator(nodeBefore, state);
+            if (clauseOperator === "as") {
+              return {
+                from: context.pos,
+                options: [
+                  {
+                    label: "press ENTER to apply filter and save",
+                    apply: () => onSubmit.current(),
+                    boost: 5
+                  }
+                ]
+              };
             }
           }
           break;
-        case "save": {
-          if (typeof onSubmit !== "function") {
-            throw Error(
-              "useFilterSuggestionProvider, onSubmit must be supplied for 'save' suggestions"
-            );
-          }
-          return await getSaveSuggestions({
-            existingFilter,
-            filterName,
-            onSubmit,
-            saveOptions
+        case "ColumnSetExpression":
+        case "Values": {
+          const columnName = (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state);
+          const selection = getSetValues(nodeBefore, state);
+          return makeSuggestions(context, "columnValue", {
+            columnName,
+            selection
           });
         }
-        case "name":
-          return await (0, import_vuu_codemirror7.getNamePrompt)("filter");
-        default:
-      }
-      return [];
-    },
-    [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
-  );
-  const isPartialMatch = (0, import_react3.useCallback)(
-    async (valueType, columnName, pattern) => {
-      const suggestions = (
-        // latestSuggestions && latestSuggestions.length > 0
-        //   ? latestSuggestions
-        await getSuggestions(valueType, { columnName })
-      );
-      if (pattern && suggestions) {
-        for (const option of suggestions) {
-          if (option.label === pattern) {
-            return false;
-          } else if (option.label.startsWith(pattern)) {
-            return true;
-          }
+        case "Comma":
+        case "LBrack": {
+          const columnName = (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state);
+          return makeSuggestions(context, "columnValue", { columnName });
         }
-      }
-      return false;
-    },
-    [getSuggestions]
-  );
-  return {
-    getSuggestions,
-    isPartialMatch
-  };
-};
-
-// src/filter-toolbar/FilterToolbar.tsx
-var import_salt_lab4 = require("@heswell/salt-lab");
-var import_classnames2 = __toESM(require_classnames(), 1);
-
-// src/filter-toolbar/useFilterToolbar.tsx
-var import_salt_lab3 = require("@heswell/salt-lab");
-
-// src/filter-toolbar/FilterDropdown.tsx
-var import_salt_lab = require("@heswell/salt-lab");
-var import_react4 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var isString = (s) => typeof s === "string";
-var stripQuotes = (selected) => {
-  if (isString(selected)) {
-    if (selected.startsWith('"') && selected.endsWith('"')) {
-      return selected.slice(1, -1);
-    } else {
-      return selected;
-    }
-  } else {
-    return selected.map(stripQuotes);
-  }
-};
-var FilterDropdown = ({
-  column,
-  selected: selectedProp,
-  suggestionProvider,
-  ...props
-}) => {
-  const selected = selectedProp != null ? stripQuotes(selectedProp) : void 0;
-  const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
-  const [values, setValues] = (0, import_react4.useState)(initialValues);
-  console.log({ initialValues });
-  const handleOpenChange = (0, import_react4.useCallback)(
-    async (isOpen) => {
-      if (isOpen) {
-        const values2 = await suggestionProvider.getSuggestions("columnValue", {
-          columnName: column
-        });
-        console.log({ values: values2 });
-        setValues(values2.map((suggestion) => suggestion.label));
+        case "ColumnValueExpression":
+          {
+            const lastToken = (_b = nodeBefore.lastChild) == null ? void 0 : _b.prevSibling;
+            if ((lastToken == null ? void 0 : lastToken.name) === "Column") {
+              return makeSuggestions(context, "operator", {
+                columnName: (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state)
+              });
+            } else if ((lastToken == null ? void 0 : lastToken.name) === "Operator") {
+              return makeSuggestions(context, "columnValue", {
+                columnName: (0, import_vuu_codemirror5.getNodeByName)(lastToken, state),
+                operator: (0, import_vuu_codemirror5.getValue)(lastToken, state)
+              });
+            }
+          }
+          break;
+        case "In": {
+          return {
+            from: context.pos,
+            options: [{ label: "[", apply: " [", type: "text" }]
+          };
+        }
+        case "Eq": {
+          return makeSuggestions(context, "columnValue", {
+            columnName: (0, import_vuu_codemirror5.getNodeByName)(nodeBefore, state)
+          });
+        }
+        case "AndExpression":
+        case "OrExpression": {
+          return makeSuggestions(context, "column");
+        }
+        default:
       }
     },
-    [column, suggestionProvider]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_salt_lab.Dropdown,
-    {
-      ...props,
-      onOpenChange: handleOpenChange,
-      selected,
-      source: values
-    }
+    [existingFilter, makeSuggestions, onSubmit, suggestionProvider]
   );
 };
 
-// src/filter-toolbar/FilterDropdownMultiSelect.tsx
-var import_salt_lab2 = require("@heswell/salt-lab");
-var import_react5 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var isString2 = (s) => typeof s === "string";
-var stripQuotes2 = (selected) => {
-  if (selected === void 0) {
-    return void 0;
-  } else if (isString2(selected)) {
-    if (selected.startsWith('"') && selected.endsWith('"')) {
-      return selected.slice(1, -1);
-    } else {
-      return selected;
-    }
+// src/filter-input/useCodeMirrorEditor.ts
+var getView = (ref) => {
+  if (ref.current == void 0) {
+    throw Error("EditorView not defined");
+  }
+  return ref.current;
+};
+var getOptionClass = (completion) => {
+  return (0, import_classnames.default)("vuuSuggestion", {
+    vuuIllustration: completion.isIllustration
+  });
+};
+var stripName = (filterQuery) => {
+  const pos = filterQuery.lastIndexOf(" as ");
+  if (pos !== -1) {
+    return filterQuery.slice(0, pos);
   } else {
-    return selected.map(stripQuotes2);
+    return filterQuery;
   }
 };
-var FilterDropdownMultiSelect = ({
-  column,
-  selected: selectedProp,
-  suggestionProvider,
-  ...props
+var noop = () => console.log("noooop");
+var useCodeMirrorEditor = ({
+  existingFilter,
+  onSubmitFilter,
+  suggestionProvider
 }) => {
-  const selected = stripQuotes2(selectedProp);
-  const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
-  const [values, setValues] = (0, import_react5.useState)(initialValues);
-  const handleOpenChange = (0, import_react5.useCallback)(
-    async (isOpen) => {
-      if (isOpen) {
-        const values2 = await suggestionProvider.getSuggestions("columnValue", {
-          columnName: column
-        });
-        console.log({ values: values2 });
-        setValues(values2.map((suggestion) => suggestion.label));
-      }
-    },
-    [column, suggestionProvider]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_salt_lab2.Dropdown,
-    {
-      ...props,
-      onOpenChange: handleOpenChange,
-      selected,
-      selectionStrategy: "multiple",
-      source: values
-    }
+  const editorRef = (0, import_react7.useRef)(null);
+  const onSubmit = (0, import_react7.useRef)(noop);
+  const viewRef = (0, import_react7.useRef)();
+  const completionFn = useAutoComplete(
+    suggestionProvider,
+    onSubmit,
+    existingFilter
   );
-};
-
-// src/filter-toolbar/useFilterToolbar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var filterToControl = (filter, suggestionProvider) => {
-  if (isNamedFilter(filter)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_salt_lab3.ToggleButton,
-      {
-        className: "vuuToggleButton",
-        toggled: true,
-        variant: "secondary",
-        children: filter.name
+  const [createState, clearInput] = (0, import_react7.useMemo)(() => {
+    const parseFilter2 = () => {
+      const view = getView(viewRef);
+      const source = view.state.doc.toString();
+      const tree = (0, import_vuu_codemirror6.ensureSyntaxTree)(view.state, view.state.doc.length, 5e3);
+      if (tree) {
+        const filter = walkTree(tree, source);
+        return [filter, stripName(source), filter.name];
+      } else {
+        return [void 0, "", void 0];
       }
-    );
-  }
-  if (isSingleValueFilter2(filter)) {
-    const { column, value } = filter;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_salt_lab3.ToolbarField,
-      {
-        className: "vuuFilterDropdown",
-        label: column,
-        labelPlacement: "top",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          FilterDropdown,
-          {
-            column,
-            selected: value.toString(),
-            selectionStrategy: "default",
-            source: [value.toString()],
-            suggestionProvider,
-            style: { width: 100 }
+    };
+    const clearInput2 = () => {
+      getView(viewRef).setState(createState2());
+    };
+    const submitFilterAndClearInput = (mode) => {
+      const [filter, filterQuery, filterName] = parseFilter2();
+      onSubmitFilter == null ? void 0 : onSubmitFilter(filter, filterQuery, mode, filterName);
+      clearInput2();
+    };
+    const submitFilter = (key) => {
+      return import_vuu_codemirror6.keymap.of([
+        {
+          key,
+          run() {
+            submitFilterAndClearInput();
+            return true;
           }
-        )
-      },
-      column
-    );
-  }
-  if (isMultiValueFilter2(filter)) {
-    const values = filter.values.map((v) => v.toString());
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_salt_lab3.ToolbarField,
-      {
-        className: "vuuFilterDropdown",
-        label: filter.column,
-        labelPlacement: "top",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          FilterDropdownMultiSelect,
-          {
-            column: filter.column,
-            selected: values,
-            source: values,
-            suggestionProvider,
-            style: { width: 100 }
+        }
+      ]);
+    };
+    const showSuggestions = (key) => {
+      return import_vuu_codemirror6.keymap.of([
+        {
+          key,
+          run() {
+            (0, import_vuu_codemirror6.startCompletion)(getView(viewRef));
+            return true;
           }
-        )
-      },
-      filter.column
-    );
-  }
-  return filter.filters.map(
-    (filter2) => filterToControl(filter2, suggestionProvider)
-  );
-};
-var useFilterToolbar = ({
-  filter,
-  suggestionProvider
-}) => {
-  if (filter) {
-    return filterToControl(filter, suggestionProvider);
-  }
-  return [];
+        }
+      ]);
+    };
+    const createState2 = () => import_vuu_codemirror6.EditorState.create({
+      doc: "",
+      extensions: [
+        import_vuu_codemirror6.minimalSetup,
+        (0, import_vuu_codemirror6.autocompletion)({
+          override: [completionFn],
+          optionClass: getOptionClass
+        }),
+        filterLanguageSupport(),
+        import_vuu_codemirror6.keymap.of(import_vuu_codemirror6.defaultKeymap),
+        submitFilter("Ctrl-Enter"),
+        showSuggestions("ArrowDown"),
+        import_vuu_codemirror6.EditorView.updateListener.of((v) => {
+          const view = getView(viewRef);
+          if (v.docChanged) {
+            (0, import_vuu_codemirror6.startCompletion)(view);
+          }
+        }),
+        import_vuu_codemirror6.EditorState.transactionFilter.of(
+          (tr) => tr.newDoc.lines > 1 ? [] : tr
+        ),
+        vuuTheme,
+        vuuHighlighting
+      ]
+    });
+    onSubmit.current = (mode) => {
+      submitFilterAndClearInput(mode);
+      setTimeout(() => {
+        getView(viewRef).focus();
+      }, 100);
+    };
+    return [createState2, clearInput2];
+  }, [completionFn, onSubmitFilter]);
+  (0, import_react7.useEffect)(() => {
+    if (!editorRef.current) {
+      throw Error("editor not in dom");
+    }
+    viewRef.current = new import_vuu_codemirror6.EditorView({
+      state: createState(),
+      parent: editorRef.current
+    });
+    return () => {
+      var _a;
+      (_a = viewRef.current) == null ? void 0 : _a.destroy();
+    };
+  }, [completionFn, createState]);
+  return { editorRef, clearInput };
 };
 
-// src/filter-toolbar/FilterToolbar.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var FilterToolbar = ({
-  className,
-  filter,
+// src/filter-input/FilterInput.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase = "vuuFilterInput";
+var FilterInput = ({
+  existingFilter,
+  iconName = "filter",
+  namedFilters,
+  onSubmitFilter,
   suggestionProvider,
   ...props
 }) => {
-  console.log(`FilterToolbar ${JSON.stringify(filter, null, 2)}`);
-  const toolbarItems = useFilterToolbar({ filter, suggestionProvider });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab4.Toolbar, { className: (0, import_classnames2.default)("vuuFilterToolbar", className), ...props, children: toolbarItems });
+  const { editorRef, clearInput } = useCodeMirrorEditor({
+    existingFilter,
+    onSubmitFilter,
+    suggestionProvider
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...props, className: classBase, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_core2.Button,
+      {
+        className: `${classBase}-FilterButton`,
+        "data-icon": iconName,
+        tabIndex: -1
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase}-Editor`, ref: editorRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_core2.Button,
+      {
+        className: `${classBase}-ClearButton`,
+        "data-icon": "close-circle",
+        onClick: clearInput
+      }
+    )
+  ] });
 };
 
-// src/filter-evaluation-utils.ts
-var filterPredicateMap = /* @__PURE__ */ new Map();
-var filterReject = () => false;
-var getFilterPredicate = (columnMap, filterQuery) => {
-  let predicate = filterPredicateMap.get(filterQuery);
-  if (predicate) {
-    return predicate;
-  }
-  try {
-    const filter = parseFilter(filterQuery);
-    predicate = filterPredicate(columnMap, filter);
-    filterPredicateMap.set(filterQuery, predicate);
-    return predicate;
-  } catch (err) {
-    console.warn(
-      `filter-evaluation-utils, failed to parse filter "${filterQuery}"`
-    );
-    return filterReject;
-  }
+// src/filter-input/useFilterSuggestionProvider.ts
+var import_vuu_codemirror7 = require("@vuu-ui/vuu-codemirror");
+var import_vuu_data2 = require("@vuu-ui/vuu-data");
+var import_react8 = require("react");
+
+// src/filter-input/filterInfo.ts
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var filterInfo = (filterName, filterQuery) => {
+  const rootElement = (0, import_vuu_utils3.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils3.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils3.createEl)("span", "function-name", filterName);
+  headingElement.appendChild(nameElement);
+  const child2 = (0, import_vuu_utils3.createEl)("p", void 0, filterQuery);
+  rootElement.appendChild(headingElement);
+  rootElement.appendChild(child2);
+  return rootElement;
 };
-function filterPredicate(columnMap, filter) {
-  switch (filter.op) {
-    case "in":
-      return testInclude(columnMap, filter);
-    case "=":
-      return testEQ(columnMap, filter);
-    case ">":
-      return testGT(columnMap, filter);
-    case ">=":
-      return testGE(columnMap, filter);
-    case "<":
-      return testLT(columnMap, filter);
-    case "<=":
-      return testLE(columnMap, filter);
-    case "starts":
-      return testSW(columnMap, filter);
-    case "and":
-      return testAND(columnMap, filter);
-    case "or":
-      return testOR(columnMap, filter);
-    default:
-      console.log(`unrecognized filter type ${filter.op}`);
-      return () => true;
+
+// src/filter-input/useFilterSuggestionProvider.ts
+var NO_NAMED_FILTERS = [];
+var NONE = {};
+var saveAsTab = (onSubmit) => [
+  {
+    label: "Press ENTER to create TAB",
+    apply: () => onSubmit("tab"),
+    boost: 6
   }
-}
-var testInclude = (columnMap, filter) => {
-  return (row) => filter.values.indexOf(row[columnMap[filter.column]]) !== -1;
-};
-var testEQ = (columnMap, filter) => {
-  return (row) => row[columnMap[filter.column]] === filter.value;
-};
-var testGT = (columnMap, filter) => {
-  return (row) => row[columnMap[filter.column]] > filter.value;
+];
+var makeSaveOrExtendSuggestions = (onSubmit, existingFilter, withJoinSuggestions = true) => {
+  const result = existingFilter ? [
+    {
+      label: "REPLACE existing filter",
+      apply: () => onSubmit("replace"),
+      boost: 8
+    },
+    {
+      label: "AND existing filter",
+      apply: () => onSubmit("and"),
+      boost: 7
+    },
+    {
+      label: "OR existing filter",
+      apply: () => onSubmit("or"),
+      boost: 7
+    }
+  ] : [
+    {
+      label: "Press ENTER to submit",
+      apply: () => onSubmit(),
+      boost: 6
+    }
+  ];
+  return withJoinSuggestions ? result.concat(import_vuu_codemirror7.booleanJoinSuggestions).concat(import_vuu_codemirror7.asNameSuggestion) : result;
 };
-var testGE = (columnMap, filter) => {
-  return (row) => row[columnMap[filter.column]] >= filter.value;
+var promptToSaveOrExtend = (onSubmit, existingFilter) => makeSaveOrExtendSuggestions(onSubmit, existingFilter, true);
+var promptToSave = (onSubmit) => makeSaveOrExtendSuggestions(onSubmit, void 0);
+var getSaveSuggestions = ({
+  existingFilter,
+  filterName,
+  onSubmit,
+  saveOptions
+}) => {
+  const includeTabSuggestion = filterName && saveOptions.allowSaveAsTab;
+  const result = existingFilter ? promptToSaveOrExtend(onSubmit, existingFilter) : promptToSave(onSubmit);
+  if (includeTabSuggestion) {
+    return result.concat(saveAsTab(onSubmit));
+  } else {
+    return result;
+  }
 };
-var testLT = (columnMap, filter) => {
-  return (row) => row[columnMap[filter.column]] < filter.value;
+var suggestColumns = (columns) => columns.map((column) => ({
+  boost: 5,
+  label: column.name
+}));
+var suggestNamedFilters = (namedFilters) => namedFilters ? Array.from(namedFilters.entries()).map(([filterName, filterQuery]) => ({
+  info: () => filterInfo(filterName, filterQuery),
+  label: filterName,
+  type: "filter"
+})) : NO_NAMED_FILTERS;
+var doneCommand = {
+  label: "Done",
+  apply: "] ",
+  type: "keyword",
+  boost: 10
 };
-var testLE = (columnMap, filter) => {
-  return (row) => row[columnMap[filter.column]] <= filter.value;
+var withApplySpace = (suggestions, startsWith = "") => suggestions.filter((sugg) => startsWith === "" || sugg.label.startsWith(startsWith)).map((suggestion) => ({
+  ...suggestion,
+  apply: suggestion.label + " "
+}));
+var defaultSaveOptions = {
+  allowReplace: true
 };
-var testSW = (columnMap, filter) => {
-  const filterValue2 = filter.value;
-  if (typeof filterValue2 !== "string") {
-    throw Error("string filter applied to value of wrong type");
-  }
-  return (row) => {
-    const rowValue = row[columnMap[filter.column]];
-    if (typeof rowValue !== "string") {
-      throw Error("string filter applied to value of wrong type");
-    }
-    return rowValue.toLowerCase().startsWith(filterValue2.toLowerCase());
+var useFilterSuggestionProvider = ({
+  columns,
+  namedFilters,
+  saveOptions = defaultSaveOptions,
+  table,
+  typeaheadHook: useTypeahead = import_vuu_data2.useTypeaheadSuggestions
+}) => {
+  const latestSuggestionsRef = (0, import_react8.useRef)();
+  const getTypeaheadSuggestions = useTypeahead();
+  const getSuggestions = (0, import_react8.useCallback)(
+    async (suggestionType, options = NONE) => {
+      const {
+        columnName,
+        existingFilter,
+        filterName,
+        operator,
+        quoted: autoQuoted,
+        onSubmit,
+        startsWith,
+        selection
+      } = options;
+      switch (suggestionType) {
+        case "operator":
+          {
+            const column = columns.find((col) => col.name === columnName);
+            if (column) {
+              switch (column.serverDataType) {
+                case "string":
+                case "char":
+                  return withApplySpace(import_vuu_codemirror7.stringOperators, startsWith);
+                case "int":
+                case "long":
+                case "double":
+                  return withApplySpace(import_vuu_codemirror7.numericOperators);
+              }
+            } else {
+              console.warn(`'${columnName}' does not match any column name`);
+            }
+          }
+          break;
+        case "column": {
+          const columnSuggestions = await suggestColumns(columns);
+          const filterSuggestions = await suggestNamedFilters(namedFilters);
+          return (latestSuggestionsRef.current = withApplySpace(columnSuggestions)).concat(
+            withApplySpace(filterSuggestions)
+          );
+        }
+        case "columnValue":
+          {
+            if (columnName) {
+              const column = columns.find((col) => col.name === columnName);
+              if (!column) {
+                throw Error(
+                  `useFilterSUggestionProvider no column ${columnName}`
+                );
+              }
+              const prefix = Array.isArray(selection) ? selection.length === 0 ? "[" : "," : "";
+              const params = (0, import_vuu_data2.getTypeaheadParams)(
+                table,
+                columnName,
+                startsWith
+              );
+              const suggestions = await getTypeaheadSuggestions(params);
+              const isIllustration = operator === "starts";
+              latestSuggestionsRef.current = (0, import_vuu_codemirror7.toSuggestions)(suggestions, {
+                moveCursorToEnd: autoQuoted,
+                quoted: (column == null ? void 0 : column.serverDataType) === "string" && !autoQuoted,
+                suffix: autoQuoted ? "" : " ",
+                prefix: isIllustration ? startsWith : prefix,
+                isIllustration
+              });
+              if (Array.isArray(selection) && (selection == null ? void 0 : selection.length) > 1) {
+                return [doneCommand, ...latestSuggestionsRef.current];
+              }
+              return latestSuggestionsRef.current;
+            }
+          }
+          break;
+        case "save": {
+          if (typeof onSubmit !== "function") {
+            throw Error(
+              "useFilterSuggestionProvider, onSubmit must be supplied for 'save' suggestions"
+            );
+          }
+          return await getSaveSuggestions({
+            existingFilter,
+            filterName,
+            onSubmit,
+            saveOptions
+          });
+        }
+        case "name":
+          return await (0, import_vuu_codemirror7.getNamePrompt)("filter");
+        default:
+      }
+      return [];
+    },
+    [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
+  );
+  const isPartialMatch = (0, import_react8.useCallback)(
+    async (valueType, columnName, pattern) => {
+      const suggestions = (
+        // latestSuggestions && latestSuggestions.length > 0
+        //   ? latestSuggestions
+        await getSuggestions(valueType, { columnName })
+      );
+      if (pattern && suggestions) {
+        for (const option of suggestions) {
+          if (option.label === pattern) {
+            return false;
+          } else if (option.label.startsWith(pattern)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    [getSuggestions]
+  );
+  return {
+    getSuggestions,
+    isPartialMatch
   };
 };
-var testAND = (columnMap, filter) => {
-  const filters = filter.filters.map((f1) => filterPredicate(columnMap, f1));
-  return (row) => filters.every((fn) => fn(row));
-};
-function testOR(columnMap, filter) {
-  const filters = filter.filters.map((f1) => filterPredicate(columnMap, f1));
-  return (row) => filters.some((fn) => fn(row));
-}
 
-// src/filter-utils.ts
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+// src/filter-toolbar/FilterToolbar.tsx
+var import_salt_lab8 = require("@heswell/salt-lab");
+var import_classnames2 = __toESM(require_classnames(), 1);
 
-// src/filterTypes.ts
-var singleValueFilterOps = /* @__PURE__ */ new Set([
-  "=",
-  "!=",
-  ">",
-  ">=",
-  "<",
-  "<=",
-  "starts",
-  "ends"
-]);
-var isNamedFilter = (f) => f !== void 0 && f.name !== void 0;
-var isSingleValueFilter2 = (f) => f !== void 0 && singleValueFilterOps.has(f.op);
-var isFilterClause = (f) => f !== void 0 && (isSingleValueFilter2(f) || isMultiValueFilter2(f));
-var isMultiValueFilter2 = (f) => f !== void 0 && f.op === "in";
-var isInFilter = (f) => f.op === "in";
-var isAndFilter = (f) => f.op === "and";
-var isOrFilter = (f) => f.op === "or";
-function isMultiClauseFilter2(f) {
-  return f !== void 0 && (f.op === "and" || f.op === "or");
-}
+// src/filter-toolbar/useFilterToolbar.tsx
+var import_salt_lab7 = require("@heswell/salt-lab");
 
-// src/filter-utils.ts
-var AND = "and";
-var EQUALS = "=";
-var GREATER_THAN = ">";
-var LESS_THAN = "<";
-var OR = "or";
-var STARTS_WITH = "starts";
-var ENDS_WITH = "ends";
-var IN = "in";
-var filterClauses = (filter, clauses = []) => {
-  if (filter) {
-    if (isMultiClauseFilter2(filter)) {
-      filter.filters.forEach((f) => clauses.push(...filterClauses(f)));
+// src/filter-toolbar/FilterDropdown.tsx
+var import_salt_lab5 = require("@heswell/salt-lab");
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var isString = (s) => typeof s === "string";
+var stripQuotes = (selected) => {
+  if (isString(selected)) {
+    if (selected.startsWith('"') && selected.endsWith('"')) {
+      return selected.slice(1, -1);
     } else {
-      clauses.push(filter);
+      return selected;
     }
+  } else {
+    return selected.map(stripQuotes);
   }
-  return clauses;
 };
-var DEFAULT_ADD_FILTER_OPTS = {
-  combineWith: "and"
+var FilterDropdown = ({
+  column,
+  selected: selectedProp,
+  suggestionProvider,
+  ...props
+}) => {
+  const selected = selectedProp != null ? stripQuotes(selectedProp) : void 0;
+  const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
+  const [values, setValues] = (0, import_react9.useState)(initialValues);
+  console.log({ initialValues });
+  const handleOpenChange = (0, import_react9.useCallback)(
+    async (isOpen) => {
+      if (isOpen) {
+        const values2 = await suggestionProvider.getSuggestions("columnValue", {
+          columnName: column
+        });
+        console.log({ values: values2 });
+        setValues(values2.map((suggestion) => suggestion.label));
+      }
+    },
+    [column, suggestionProvider]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_salt_lab5.Dropdown,
+    {
+      ...props,
+      onOpenChange: handleOpenChange,
+      selected,
+      source: values
+    }
+  );
 };
-var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
-  var _a;
-  if (includesNoValues(filter)) {
-    if (isMultiClauseFilter2(filter)) {
+
+// src/filter-toolbar/FilterDropdownMultiSelect.tsx
+var import_salt_lab6 = require("@heswell/salt-lab");
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var isString2 = (s) => typeof s === "string";
+var stripQuotes2 = (selected) => {
+  if (selected === void 0) {
+    return void 0;
+  } else if (isString2(selected)) {
+    if (selected.startsWith('"') && selected.endsWith('"')) {
+      return selected.slice(1, -1);
     } else {
-      existingFilter = removeFilterForColumn(existingFilter, {
-        name: filter.column
-      });
-    }
-  } else if (includesAllValues(filter)) {
-    if (isMultiClauseFilter2(filter)) {
+      return selected;
     }
-    return removeFilterForColumn(existingFilter, { name: (_a = filter.column) != null ? _a : "" });
-  }
-  if (!existingFilter) {
-    return filter;
-  }
-  if (!filter) {
-    return existingFilter;
-  }
-  if (existingFilter.op === AND && filter.op === AND) {
-    return {
-      op: AND,
-      filters: combine(existingFilter.filters, filter.filters)
-    };
-  }
-  if (existingFilter.op === AND) {
-    const filters = replaceOrInsert(existingFilter.filters, filter);
-    return filters.length > 1 ? { op: AND, filters } : filters[0];
-  }
-  if (filter.op === AND) {
-    return { op: AND, filters: filter.filters.concat(existingFilter) };
-  }
-  if (filterEquals(existingFilter, filter, true)) {
-    return filter;
-  }
-  if (canMerge(existingFilter, filter)) {
-    return merge(existingFilter, filter);
-  }
-  return { op: combineWith, filters: [existingFilter, filter] };
-};
-var includesNoValues = (filter) => {
-  if (!filter) {
-    return false;
-  }
-  if (isInFilter(filter) && filter.values.length === 0) {
-    return true;
-  }
-  return isAndFilter(filter) && filter.filters.some((f) => includesNoValues(f));
-};
-var filterValue = (value) => typeof value === "string" ? `"${value}"` : value;
-var filterAsQuery = (f) => {
-  if (isMultiClauseFilter2(f)) {
-    return f.filters.map((filter) => filterAsQuery(filter)).join(` ${f.op} `);
-  } else if (isMultiValueFilter2(f)) {
-    return `${f.column} ${f.op} [${f.values.join(",")}]`;
   } else {
-    return `${f.column} ${f.op} ${filterValue(f.value)}`;
-  }
-};
-var includesAllValues = (filter) => {
-  if (!filter) {
-    return false;
-  }
-  if (filter.op === STARTS_WITH && filter.value === "") {
-    return true;
-  }
-  return filter.op === STARTS_WITH && filter.value === "";
-};
-var replaceOrInsert = (filters, filter) => {
-  return filters.concat(filter);
-};
-var merge = (f1, f2) => {
-  if (includesNoValues(f2)) {
-    return f2;
-  }
-  if (isInFilter(f1) && isInFilter(f2)) {
-    return {
-      ...f1,
-      values: [
-        ...f1.values,
-        ...f2.values.filter(
-          (v) => !f1.values.includes(v)
-        )
-      ]
-    };
-  } else if (isInFilter(f1) && f2.op === EQUALS) {
-    return {
-      ...f1,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      values: f1.values.concat([f2.value])
-    };
-  } else if (f1.op === EQUALS && f2.op === EQUALS) {
-    return {
-      column: f1.column,
-      op: IN,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      values: [f1.value, f2.value]
-    };
+    return selected.map(stripQuotes2);
   }
-  return f2;
-};
-var combine = (existingFilters, replacementFilters) => {
-  const equivalentType = ({ op: t1 }, { op: t2 }) => {
-    return t1 === t2 || t1[0] === t2[0];
-  };
-  const replaces = (existingFilter, replacementFilter) => {
-    return existingFilter.column === replacementFilter.column && equivalentType(existingFilter, replacementFilter);
-  };
-  const stillApplicable = (existingFilter) => replacementFilters.some(
-    (replacementFilter) => replaces(existingFilter, replacementFilter)
-  ) === false;
-  return existingFilters.filter(stillApplicable).concat(replacementFilters);
 };
-var removeColumnFromFilter = (column, filter) => {
-  if (isMultiClauseFilter2(filter)) {
-    const [clause1, clause2] = filter.filters;
-    if (clause1.column === column.name) {
-      return [clause2, filterAsQuery(clause2)];
-    }
-    if (clause2.column === column.name) {
-      return [clause1, filterAsQuery(clause1)];
+var FilterDropdownMultiSelect = ({
+  column,
+  selected: selectedProp,
+  suggestionProvider,
+  ...props
+}) => {
+  const selected = stripQuotes2(selectedProp);
+  const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
+  const [values, setValues] = (0, import_react10.useState)(initialValues);
+  const handleOpenChange = (0, import_react10.useCallback)(
+    async (isOpen) => {
+      if (isOpen) {
+        const values2 = await suggestionProvider.getSuggestions("columnValue", {
+          columnName: column
+        });
+        console.log({ values: values2 });
+        setValues(values2.map((suggestion) => suggestion.label));
+      }
+    },
+    [column, suggestionProvider]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_salt_lab6.Dropdown,
+    {
+      ...props,
+      onOpenChange: handleOpenChange,
+      selected,
+      selectionStrategy: "multiple",
+      source: values
     }
-  }
-  return [void 0, ""];
-};
-var removeFilter = (sourceFilter, filterToRemove) => {
-  if (filterEquals(sourceFilter, filterToRemove, true)) {
-    return null;
-  }
-  if (sourceFilter.op !== AND) {
-    throw Error(
-      `removeFilter cannot remove ${JSON.stringify(
-        filterToRemove
-      )} from ${JSON.stringify(sourceFilter)}`
-    );
-  }
-  const filters = sourceFilter.filters.filter(
-    (f) => !filterEquals(f, filterToRemove)
   );
-  return filters.length > 0 ? { type: AND, filters } : null;
 };
-var splitFilterOnColumn = (filter, columnName) => {
-  if (!filter) {
-    return [null, null];
+
+// src/filter-toolbar/useFilterToolbar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var filterToControl = (filter, suggestionProvider) => {
+  if (isNamedFilter(filter)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_salt_lab7.ToggleButton,
+      {
+        className: "vuuToggleButton",
+        toggled: true,
+        variant: "secondary",
+        children: filter.name
+      }
+    );
   }
-  if (filter.column === columnName) {
-    return [filter, null];
+  if (isSingleValueFilter(filter)) {
+    const { column, value } = filter;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_salt_lab7.ToolbarField,
+      {
+        className: "vuuFilterDropdown",
+        label: column,
+        labelPlacement: "top",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          FilterDropdown,
+          {
+            column,
+            selected: value.toString(),
+            selectionStrategy: "default",
+            source: [value.toString()],
+            suggestionProvider,
+            style: { width: 100 }
+          }
+        )
+      },
+      column
+    );
   }
-  if (filter.op !== AND) {
-    return [null, filter];
+  if (isMultiValueFilter(filter)) {
+    const values = filter.values.map((v) => v.toString());
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_salt_lab7.ToolbarField,
+      {
+        className: "vuuFilterDropdown",
+        label: filter.column,
+        labelPlacement: "top",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          FilterDropdownMultiSelect,
+          {
+            column: filter.column,
+            selected: values,
+            source: values,
+            suggestionProvider,
+            style: { width: 100 }
+          }
+        )
+      },
+      filter.column
+    );
   }
-  const [[columnFilter = null], filters] = (0, import_vuu_utils3.partition)(
-    filter.filters,
-    (f) => f.column === columnName
+  return filter.filters.map(
+    (filter2) => filterToControl(filter2, suggestionProvider)
   );
-  return filters.length === 1 ? [columnFilter, filters[0]] : [columnFilter, { op: AND, filters }];
 };
-var overrideColName = (filter, column) => {
-  if (isMultiClauseFilter2(filter)) {
-    return {
-      op: filter.op,
-      filters: filter.filters.map((f) => overrideColName(f, column))
-    };
+var useFilterToolbar = ({
+  filter,
+  suggestionProvider
+}) => {
+  if (filter) {
+    return filterToControl(filter, suggestionProvider);
   }
-  return { ...filter, column };
+  return [];
 };
-var filterIncludesColumn = (filter, column) => {
-  if (!filter) {
-    return false;
-  }
-  const { op, column: filterColName } = filter;
-  switch (op) {
-    case AND:
-    case OR:
-      return filter.filters != null && filter.filters.some((f) => filterIncludesColumn(f, column));
-    default:
-      return filterColName === column.name;
-  }
+
+// src/filter-toolbar/FilterToolbar.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FilterToolbar = ({
+  className,
+  filter,
+  suggestionProvider,
+  ...props
+}) => {
+  console.log(`FilterToolbar ${JSON.stringify(filter, null, 2)}`);
+  const toolbarItems = useFilterToolbar({ filter, suggestionProvider });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_salt_lab8.Toolbar, { className: (0, import_classnames2.default)("vuuFilterToolbar", className), ...props, children: toolbarItems });
 };
-var removeFilterForColumn = (sourceFilter, column) => {
-  const colName = column.name;
-  if (!sourceFilter) {
-    return void 0;
-  }
-  if (sourceFilter.column === colName) {
-    return void 0;
+
+// src/filter-evaluation-utils.ts
+var filterPredicateMap = /* @__PURE__ */ new Map();
+var filterReject = () => false;
+var getFilterPredicate = (columnMap, filterQuery) => {
+  let predicate = filterPredicateMap.get(filterQuery);
+  if (predicate) {
+    return predicate;
   }
-  if (isAndFilter(sourceFilter) || isOrFilter(sourceFilter)) {
-    const { op } = sourceFilter;
-    const filters = sourceFilter.filters;
-    const otherColFilters = filters.filter((f) => f.column !== colName);
-    switch (otherColFilters.length) {
-      case 0:
-        return void 0;
-      case 1:
-        return otherColFilters[0];
-      default:
-        return { op, filters: otherColFilters };
-    }
+  try {
+    const filter = parseFilter(filterQuery);
+    predicate = filterPredicate(columnMap, filter);
+    filterPredicateMap.set(filterQuery, predicate);
+    return predicate;
+  } catch (err) {
+    console.warn(
+      `filter-evaluation-utils, failed to parse filter "${filterQuery}"`
+    );
+    return filterReject;
   }
-  return sourceFilter;
 };
-var canMerge = (f1, f2) => f1.column === f2.column && (f1.op === "=" || f1.op === "in") && (f2.op === "=" || f2.op === "in");
-var sameValues = (arr1, arr2) => {
-  if (arr1 === arr2) {
-    return true;
-  }
-  if (arr1.length === arr2.length) {
-    const a = arr1.slice().sort();
-    const b = arr2.slice().sort();
-    return a.join("|") === b.join("|");
+function filterPredicate(columnMap, filter) {
+  switch (filter.op) {
+    case "in":
+      return testInclude(columnMap, filter);
+    case "=":
+      return testEQ(columnMap, filter);
+    case ">":
+      return testGT(columnMap, filter);
+    case ">=":
+      return testGE(columnMap, filter);
+    case "<":
+      return testLT(columnMap, filter);
+    case "<=":
+      return testLE(columnMap, filter);
+    case "starts":
+      return testSW(columnMap, filter);
+    case "and":
+      return testAND(columnMap, filter);
+    case "or":
+      return testOR(columnMap, filter);
+    default:
+      console.log(`unrecognized filter type ${filter.op}`);
+      return () => true;
   }
-  return false;
+}
+var testInclude = (columnMap, filter) => {
+  return (row) => filter.values.indexOf(row[columnMap[filter.column]]) !== -1;
 };
-var filterEquals = (f1, f2, strict = false) => {
-  if (!strict) {
-    return true;
-  }
-  if (f1 && f2 && canMerge(f1, f2)) {
-    return f1.op === f2.op && (isSingleValueFilter2(f1) && isSingleValueFilter2(f2) && f1.value === f2.value || isMultiValueFilter2(f1) && isMultiValueFilter2(f2) && sameValues(f1.values, f2.values));
-  }
-  return false;
+var testEQ = (columnMap, filter) => {
+  return (row) => row[columnMap[filter.column]] === filter.value;
 };
-var updateFilter = (filter, newFilter, mode) => {
-  if (filter && newFilter) {
-    if (mode === "replace") {
-      return newFilter;
-    }
-    if (filter.op === "and") {
-      return {
-        ...filter,
-        filters: filter.filters.concat(newFilter)
-      };
-    }
-    const { column: columnName } = newFilter;
-    if (columnName) {
-      const existingClause = newFilter.column ? (0, import_vuu_utils3.extractFilterForColumn)(filter, columnName) : void 0;
-      if (existingClause && columnName) {
-        const result = removeFilterForColumn(filter, { name: columnName });
-        return updateFilter(result, newFilter, "add");
-      }
-    }
-    return {
-      op: "and",
-      filters: [filter, newFilter]
-    };
-  }
-  if (newFilter) {
-    return newFilter;
+var testGT = (columnMap, filter) => {
+  return (row) => row[columnMap[filter.column]] > filter.value;
+};
+var testGE = (columnMap, filter) => {
+  return (row) => row[columnMap[filter.column]] >= filter.value;
+};
+var testLT = (columnMap, filter) => {
+  return (row) => row[columnMap[filter.column]] < filter.value;
+};
+var testLE = (columnMap, filter) => {
+  return (row) => row[columnMap[filter.column]] <= filter.value;
+};
+var testSW = (columnMap, filter) => {
+  const filterValue2 = filter.value;
+  if (typeof filterValue2 !== "string") {
+    throw Error("string filter applied to value of wrong type");
   }
-  return filter;
+  return (row) => {
+    const rowValue = row[columnMap[filter.column]];
+    if (typeof rowValue !== "string") {
+      throw Error("string filter applied to value of wrong type");
+    }
+    return rowValue.toLowerCase().startsWith(filterValue2.toLowerCase());
+  };
 };
+var testAND = (columnMap, filter) => {
+  const filters = filter.filters.map((f1) => filterPredicate(columnMap, f1));
+  return (row) => filters.every((fn) => fn(row));
+};
+function testOR(columnMap, filter) {
+  const filters = filter.filters.map((f1) => filterPredicate(columnMap, f1));
+  return (row) => filters.some((fn) => fn(row));
+}
 /*! Bundled license information:
 
 classnames/index.js: