@pythia-software/query-table-ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -137,17 +137,72 @@ function formatRelative(iso) {
 }
 
 // src/DataTable.tsx
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { isComputedCellError } from "@pythia-software/query-table-core";
+import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { isSortable, readFieldValue } from "@pythia-software/query-table-core";
 import { useColumnDrag } from "@pythia-software/query-table-react";
 
+// src/FilterValuePresentation.tsx
+import { createContext, useContext, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Context = createContext({});
+var FilterValueProvider = Context.Provider;
+function useFilterValuePresentation() {
+  return useContext(Context);
+}
+function PresentedFilterValue({ field, value }) {
+  const presentation = useContext(Context);
+  return /* @__PURE__ */ jsx(Fragment, { children: presentation.render?.(field, value) ?? presentation.label?.(field, value) ?? value });
+}
+function PresentedValueInput({ field, value, options, onChange }) {
+  const presentation = useContext(Context);
+  const [open, setOpen] = useState(false), [search, setSearch] = useState("");
+  const choices = options.map((option) => typeof option === "string" ? { value: option, label: presentation.label?.(field, option) ?? option } : option);
+  const visible = choices.filter((option) => `${option.value} ${option.label}`.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ jsxs("span", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", "aria-label": `Edit ${field} filter value`, "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx(PresentedFilterValue, { field, value }),
+      !value && "Choose value"
+    ] }),
+    open && /* @__PURE__ */ jsxs("span", { style: { position: "absolute", top: "100%", left: 0, zIndex: 30, background: "var(--qt-bg, #fff)", padding: 8, minWidth: 220, maxHeight: 300, overflowY: "auto" }, onKeyDown: (e) => {
+      if (e.key === "Escape") setOpen(false);
+    }, children: [
+      /* @__PURE__ */ jsx("input", { autoFocus: true, "aria-label": `Search ${field} values`, value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+        if (e.key === "Enter" && search) {
+          e.preventDefault();
+          onChange(search);
+          setOpen(false);
+        }
+      } }),
+      visible.map((option) => /* @__PURE__ */ jsxs("button", { type: "button", style: { display: "block" }, onClick: () => {
+        onChange(option.value);
+        setOpen(false);
+      }, children: [
+        /* @__PURE__ */ jsx(PresentedFilterValue, { field, value: option.value }),
+        option.label !== option.value && /* @__PURE__ */ jsxs("small", { children: [
+          " ",
+          option.value
+        ] })
+      ] }, option.value)),
+      search && !choices.some((option) => option.value === search) && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => {
+        onChange(search);
+        setOpen(false);
+      }, children: [
+        "Use \u201C",
+        search,
+        "\u201D"
+      ] })
+    ] })
+  ] });
+}
+
 // src/CellMenu.tsx
 import { useEffect } from "react";
-import { NULLARY_OPS, opsForField } from "@pythia-software/query-table-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { NULLARY_OPS, negateClause, opsForField, opPairsForField, isFilterable } from "@pythia-software/query-table-core";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var cx = (...parts) => parts.filter(Boolean).join(" ");
-var MENU_WIDTH = 240;
+var MENU_WIDTH = 320;
 var ROW_HEIGHT = 32;
 var POINTER_OFFSET = 4;
 function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
@@ -166,73 +221,36 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
       clearTimeout(t);
     };
   }, [onClose]);
-  const ops = opsForField(field);
+  const ops = isFilterable(field) ? opsForField(field) : [];
+  const pairs = isFilterable(field) ? opPairsForField(field) : [];
+  const hasNullity = pairs.some((p) => p.keep.op === "is_null");
   const isArray = Array.isArray(value);
   const isNullish = value == null || value === "" || isArray && value.length === 0;
-  function apply(op, raw) {
-    const v = raw != null ? raw : valueToString(value);
-    onAddFilter({ field: field.name, op, value: NULLARY_OPS.has(op) ? "" : v });
+  const cellText = valueToString(value);
+  function applyClause(clause) {
+    onAddFilter(clause);
     onClose();
   }
-  const filterItems = [];
+  const rows = [];
+  const pairRow = (op, raw) => {
+    const positive = { field: field.name, op, value: NULLARY_OPS.has(op) ? "" : raw };
+    rows.push({ positive, negative: negateClause(positive, ops) });
+  };
   if (isArray && !isNullish) {
-    value.forEach((el, i) => {
-      const s = String(el);
-      const arrayOp = ops.includes("includes") ? "includes" : ops[0] ?? "=";
-      filterItems.push(
-        /* @__PURE__ */ jsxs(MenuItem, { classNames, onClick: () => apply(arrayOp, s), children: [
-          "filter: ",
-          opSymbol(arrayOp),
-          " ",
-          /* @__PURE__ */ jsx("code", { children: s })
-        ] }, `el-${i}`)
-      );
-    });
+    const arrayOp = pairs.find((p) => p.keep.op === "includes")?.keep.op ?? pairs[0]?.keep.op ?? "=";
+    value.forEach((el) => pairRow(arrayOp, String(el)));
+    if (hasNullity) pairRow("is_null", cellText);
+  } else if (!isNullish) {
+    for (const pair of pairs) pairRow(pair.keep.op, cellText);
+  } else if (hasNullity) {
+    pairRow("is_null", cellText);
   }
-  for (const op of ops) {
-    const nullary = NULLARY_OPS.has(op);
-    if (isNullish && !nullary) continue;
-    if (isArray && !nullary && !isNullish) continue;
-    filterItems.push(
-      /* @__PURE__ */ jsxs(MenuItem, { classNames, onClick: () => apply(op), children: [
-        "filter: ",
-        opSymbol(op),
-        !nullary && !isNullish ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx("code", { children: previewValue(value) })
-        ] }) : null
-      ] }, op)
-    );
-  }
-  const copyItem = /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      classNames,
-      onClick: async () => {
-        try {
-          await navigator.clipboard.writeText(valueToString(value));
-        } catch {
-        }
-        onClose();
-      },
-      children: "copy value"
-    },
-    "copy"
-  );
-  const items = [
-    /* @__PURE__ */ jsxs("div", { className: "qt-cm-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "qt-cm-field", children: field.label }),
-      /* @__PURE__ */ jsx("span", { className: "qt-cm-value", children: previewValue(value) })
-    ] }, "header"),
-    copyItem,
-    /* @__PURE__ */ jsx("div", { className: cx("qt-cm-sep", classNames?.separator) }, "sep"),
-    ...filterItems
-  ];
   const vw = typeof window !== "undefined" ? window.innerWidth : 9999;
   const vh = typeof window !== "undefined" ? window.innerHeight : 9999;
+  const approxRows = 3 + rows.length;
   const left = Math.max(8, Math.min(x + POINTER_OFFSET, vw - MENU_WIDTH - 8));
-  const top = Math.max(8, Math.min(y + POINTER_OFFSET, vh - ROW_HEIGHT * items.length - 8));
-  return /* @__PURE__ */ jsx(
+  const top = Math.max(8, Math.min(y + POINTER_OFFSET, vh - ROW_HEIGHT * approxRows - 8));
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cx("qt-cell-menu", classNames?.popover),
@@ -240,7 +258,69 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
       onClick: (e) => e.stopPropagation(),
       onContextMenu: (e) => e.preventDefault(),
       role: "menu",
-      children: items
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "qt-cm-header", children: [
+          /* @__PURE__ */ jsx2("span", { className: "qt-cm-field", children: field.label }),
+          /* @__PURE__ */ jsx2("span", { className: "qt-cm-value", children: Array.isArray(value) ? value.map((v) => /* @__PURE__ */ jsx2(PresentedFilterValue, { field: field.name, value: String(v) }, String(v))) : /* @__PURE__ */ jsx2(PresentedFilterValue, { field: field.name, value: String(value ?? "") }) })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          MenuItem,
+          {
+            classNames,
+            onClick: async () => {
+              try {
+                await navigator.clipboard.writeText(cellText);
+              } catch {
+              }
+              onClose();
+            },
+            children: "copy value"
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: cx("qt-cm-sep", classNames?.separator) }),
+        rows.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "qt-cm-filter-grid", role: "group", "aria-label": "Filter by this cell", children: [
+          /* @__PURE__ */ jsx2("span", { className: "qt-cm-col-head", children: "keep" }),
+          /* @__PURE__ */ jsx2("span", { className: "qt-cm-col-head qt-cm-col-head--neg", children: "exclude" }),
+          rows.map((row, i) => /* @__PURE__ */ jsx2(FilterPairRow, { row, value, classNames, onApply: applyClause }, i))
+        ] })
+      ]
+    }
+  );
+}
+function FilterPairRow({
+  row,
+  value,
+  classNames,
+  onApply
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(FilterButton, { clause: row.positive, value, classNames, onApply }),
+    /* @__PURE__ */ jsx2(FilterButton, { clause: row.negative, value, negative: true, classNames, onApply })
+  ] });
+}
+function FilterButton({
+  clause,
+  value,
+  negative,
+  classNames,
+  onApply
+}) {
+  if (!clause) return /* @__PURE__ */ jsx2("span", { className: "qt-cm-filter-empty", "aria-hidden": true });
+  const nullary = NULLARY_OPS.has(clause.op);
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: cx("qt-cm-item", "qt-cm-filter", negative && "qt-cm-filter--neg", classNames?.item),
+      onClick: () => onApply(clause),
+      role: "menuitem",
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "qt-cm-op", children: predicateSymbol(clause) }),
+        !nullary ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          " ",
+          /* @__PURE__ */ jsx2("code", { children: /* @__PURE__ */ jsx2(PresentedFilterValue, { field: clause.field, value: clause.value }) })
+        ] }) : null
+      ]
     }
   );
 }
@@ -249,7 +329,11 @@ function MenuItem({
   onClick,
   classNames
 }) {
-  return /* @__PURE__ */ jsx("button", { type: "button", className: cx("qt-cm-item", classNames?.item), onClick, role: "menuitem", children });
+  return /* @__PURE__ */ jsx2("button", { type: "button", className: cx("qt-cm-item", classNames?.item), onClick, role: "menuitem", children });
+}
+function predicateSymbol(clause) {
+  const base = opSymbol(clause.op);
+  return clause.negated ? `not ${base}` : base;
 }
 function opSymbol(op) {
   switch (op) {
@@ -259,6 +343,14 @@ function opSymbol(op) {
       return "\u2265";
     case "<=":
       return "\u2264";
+    case "starts_with":
+      return "starts with";
+    case "ends_with":
+      return "ends with";
+    case "matches_regex":
+      return "matches";
+    case "not_matches_regex":
+      return "not matches";
     case "is_null":
       return "is null";
     case "is_not_null":
@@ -272,17 +364,9 @@ function valueToString(v) {
   if (Array.isArray(v)) return v.join(", ");
   return String(v);
 }
-function previewValue(v) {
-  if (v == null || v === "") return "(empty)";
-  if (Array.isArray(v)) {
-    return v.length === 0 ? "(empty)" : `[${v.length}] ${v.slice(0, 2).join(", ")}${v.length > 2 ? "\u2026" : ""}`;
-  }
-  const s = String(v);
-  return s.length > 50 ? s.slice(0, 50) + "\u2026" : s;
-}
 
 // src/DataTable.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var cx2 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
 var MIN_WIDTH = 1;
 var MIN_SELECTION_WIDTH = 1;
@@ -316,12 +400,12 @@ function DataTable(props) {
     overscan = DEFAULT_OVERSCAN,
     classNames
   } = props;
-  const [menu, setMenu] = useState2(null);
-  const [selectionColumnWidth, setSelectionColumnWidth] = useState2(DEFAULT_SELECTION_WIDTH);
-  const [tableColumnOrder, setTableColumnOrder] = useState2([]);
-  const [copiedCellKey, setCopiedCellKey] = useState2(null);
-  const [headerHeight, setHeaderHeight] = useState2(0);
-  const [showHorizontalCue, setShowHorizontalCue] = useState2(false);
+  const [menu, setMenu] = useState3(null);
+  const [selectionColumnWidth, setSelectionColumnWidth] = useState3(DEFAULT_SELECTION_WIDTH);
+  const [tableColumnOrder, setTableColumnOrder] = useState3([]);
+  const [copiedCellKey, setCopiedCellKey] = useState3(null);
+  const [headerHeight, setHeaderHeight] = useState3(0);
+  const [showHorizontalCue, setShowHorizontalCue] = useState3(false);
   const tableWrapRef = useRef(null);
   const tableHeadRef = useRef(null);
   const tableRef = useRef(null);
@@ -649,7 +733,7 @@ function DataTable(props) {
     }
   }
   function resizeHandle(name, label, width) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "span",
       {
         className: cx2("qt-resize-handle", classNames?.resizeHandle),
@@ -697,12 +781,12 @@ function DataTable(props) {
   const lastVirtualRow = virtualRows[virtualRows.length - 1];
   const paddingTop = firstVirtualRow ? Math.max(0, firstVirtualRow.start - headerHeight) : 0;
   const paddingBottom = lastVirtualRow ? Math.max(0, rowVirtualizer.getTotalSize() - (lastVirtualRow.end - headerHeight)) : 0;
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    showHorizontalCue ? /* @__PURE__ */ jsxs2("div", { className: "qt-table-scroll-cue", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    showHorizontalCue ? /* @__PURE__ */ jsxs3("div", { className: "qt-table-scroll-cue", "aria-hidden": "true", children: [
       "Swipe to see more ",
-      /* @__PURE__ */ jsx2("span", { children: "\u2192" })
+      /* @__PURE__ */ jsx3("span", { children: "\u2192" })
     ] }) : null,
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         ref: tableWrapRef,
@@ -722,8 +806,8 @@ function DataTable(props) {
         "aria-label": "Scrollable data table",
         tabIndex: 0,
         children: [
-          loading && /* @__PURE__ */ jsx2("div", { className: cx2("qt-loading-bar", classNames?.loadingBar), role: "progressbar", "aria-label": "loading" }),
-          /* @__PURE__ */ jsx2(
+          loading && /* @__PURE__ */ jsx3("div", { className: cx2("qt-loading-bar", classNames?.loadingBar), role: "progressbar", "aria-label": "loading" }),
+          /* @__PURE__ */ jsx3(
             "div",
             {
               ref: resizeGuideRef,
@@ -731,21 +815,21 @@ function DataTable(props) {
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsxs2("table", { ref: tableRef, className: cx2("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
-            /* @__PURE__ */ jsxs2("colgroup", { children: [
+          /* @__PURE__ */ jsxs3("table", { ref: tableRef, className: cx2("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
+            /* @__PURE__ */ jsxs3("colgroup", { children: [
               renderedColumnNames.map((name) => {
                 const f = fieldByName.get(name);
                 const w = displayColumnWidthFor(name, f);
-                if (name === SELECTION_COLUMN) return /* @__PURE__ */ jsx2("col", { "data-qt-column": name, style: { width: w } }, name);
+                if (name === SELECTION_COLUMN) return /* @__PURE__ */ jsx3("col", { "data-qt-column": name, style: { width: w } }, name);
                 if (!f) return null;
-                return /* @__PURE__ */ jsx2("col", { "data-qt-column": f.name, style: { width: w } }, f.name);
+                return /* @__PURE__ */ jsx3("col", { "data-qt-column": f.name, style: { width: w } }, f.name);
               }),
-              trailing && /* @__PURE__ */ jsx2("col", { style: { width: 40 } })
+              trailing && /* @__PURE__ */ jsx3("col", { style: { width: 40 } })
             ] }),
-            /* @__PURE__ */ jsx2("thead", { ref: tableHeadRef, className: classNames?.thead, children: /* @__PURE__ */ jsxs2("tr", { className: classNames?.headerRow, children: [
+            /* @__PURE__ */ jsx3("thead", { ref: tableHeadRef, className: classNames?.thead, children: /* @__PURE__ */ jsxs3("tr", { className: classNames?.headerRow, children: [
               renderedColumnNames.map((name) => {
                 if (name === SELECTION_COLUMN) {
-                  return /* @__PURE__ */ jsxs2(
+                  return /* @__PURE__ */ jsxs3(
                     "th",
                     {
                       "data-qt-field": name,
@@ -789,7 +873,7 @@ function DataTable(props) {
                       },
                       onDragEnd: () => columnDrag.end(),
                       children: [
-                        /* @__PURE__ */ jsx2(
+                        /* @__PURE__ */ jsx3(
                           "input",
                           {
                             type: "checkbox",
@@ -811,7 +895,7 @@ function DataTable(props) {
                 if (!f) return null;
                 const info = sortInfo(f);
                 const sortable = isSortable(f);
-                return /* @__PURE__ */ jsxs2(
+                return /* @__PURE__ */ jsxs3(
                   "th",
                   {
                     "data-qt-field": f.name,
@@ -855,7 +939,7 @@ function DataTable(props) {
                     },
                     onDragEnd: () => columnDrag.end(),
                     children: [
-                      /* @__PURE__ */ jsxs2(
+                      /* @__PURE__ */ jsxs3(
                         "span",
                         {
                           className: "qt-th-label",
@@ -864,9 +948,9 @@ function DataTable(props) {
                           title: "Click to open column actions",
                           children: [
                             f.label,
-                            info && /* @__PURE__ */ jsxs2("span", { className: "qt-sort-indicator", children: [
+                            info && /* @__PURE__ */ jsxs3("span", { className: "qt-sort-indicator", children: [
                               info.dir === "asc" ? " \u2191" : " \u2193",
-                              info.priority != null && /* @__PURE__ */ jsx2("sup", { className: "qt-sort-priority", children: info.priority })
+                              info.priority != null && /* @__PURE__ */ jsx3("sup", { className: "qt-sort-priority", children: info.priority })
                             ] })
                           ]
                         }
@@ -877,17 +961,17 @@ function DataTable(props) {
                   f.name
                 );
               }),
-              trailing && /* @__PURE__ */ jsx2("th", { className: cx2("qt-th", classNames?.th), children: trailingLabel ?? "" })
+              trailing && /* @__PURE__ */ jsx3("th", { className: cx2("qt-th", classNames?.th), children: trailingLabel ?? "" })
             ] }) }),
-            /* @__PURE__ */ jsxs2("tbody", { className: classNames?.tbody, children: [
-              rows.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-empty", classNames?.empty), children: emptyMessage ?? "No rows." }) }),
-              paddingTop > 0 && /* @__PURE__ */ jsx2("tr", { className: "qt-virtual-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, style: { height: paddingTop, padding: 0, border: 0 } }) }),
+            /* @__PURE__ */ jsxs3("tbody", { className: classNames?.tbody, children: [
+              rows.length === 0 && /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-empty", classNames?.empty), children: emptyMessage ?? "No rows." }) }),
+              paddingTop > 0 && /* @__PURE__ */ jsx3("tr", { className: "qt-virtual-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("td", { colSpan: totalCols, style: { height: paddingTop, padding: 0, border: 0 } }) }),
               virtualRows.map((virtualRow) => {
                 const i = virtualRow.index;
                 const row = rows[i];
                 const id = rowIds[i] ?? null;
                 const selected = id != null && selection ? selection.isSelected(id) : false;
-                return /* @__PURE__ */ jsxs2(
+                return /* @__PURE__ */ jsxs3(
                   "tr",
                   {
                     "data-index": i,
@@ -896,7 +980,7 @@ function DataTable(props) {
                     children: [
                       renderedColumnNames.map((name) => {
                         if (name === SELECTION_COLUMN) {
-                          return /* @__PURE__ */ jsx2(
+                          return /* @__PURE__ */ jsx3(
                             "td",
                             {
                               "data-qt-field": name,
@@ -907,7 +991,7 @@ function DataTable(props) {
                                 classNames?.cell,
                                 classNames?.checkboxCell
                               ),
-                              children: id != null && /* @__PURE__ */ jsx2(
+                              children: id != null && /* @__PURE__ */ jsx3(
                                 "input",
                                 {
                                   type: "checkbox",
@@ -927,7 +1011,7 @@ function DataTable(props) {
                         const render = resolveRenderer(f, renderers);
                         const value = readFieldValue(f, row);
                         const key = cellKey(id, i, f.name);
-                        return /* @__PURE__ */ jsx2(
+                        return /* @__PURE__ */ jsx3(
                           "td",
                           {
                             "data-qt-field": f.name,
@@ -936,21 +1020,21 @@ function DataTable(props) {
                             onClick: (e) => openMenu(e, f, row),
                             onContextMenu: (e) => openMenu(e, f, row),
                             onDoubleClick: (e) => copyCellToClipboard(e, f, id, i, value),
-                            children: copiedCellKey === key ? /* @__PURE__ */ jsx2("span", { className: "qt-cell-copy-chip", children: "\u2713 copied" }) : render({ value, row, field: f, query })
+                            children: copiedCellKey === key ? /* @__PURE__ */ jsx3("span", { className: "qt-cell-copy-chip", children: "\u2713 copied" }) : isComputedCellError(value) ? /* @__PURE__ */ jsx3("span", { className: "qt-formula-error", title: value.computedError, children: value.computedError === "Calculating\u2026" ? "Calculating\u2026" : "Error" }) : render({ value, row, field: f, query })
                           },
                           f.name
                         );
                       }),
-                      trailing && /* @__PURE__ */ jsx2("td", { className: cx2("qt-cell", "qt-trailing-cell", classNames?.cell), children: trailing(row) })
+                      trailing && /* @__PURE__ */ jsx3("td", { className: cx2("qt-cell", "qt-trailing-cell", classNames?.cell), children: trailing(row) })
                     ]
                   },
                   virtualRow.key
                 );
               }),
-              paddingBottom > 0 && /* @__PURE__ */ jsx2("tr", { className: "qt-virtual-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, style: { height: paddingBottom, padding: 0, border: 0 } }) })
+              paddingBottom > 0 && /* @__PURE__ */ jsx3("tr", { className: "qt-virtual-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("td", { colSpan: totalCols, style: { height: paddingBottom, padding: 0, border: 0 } }) })
             ] }),
-            /* @__PURE__ */ jsx2("tfoot", { children: /* @__PURE__ */ jsx2("tr", { className: cx2("qt-table-summary-row", classNames?.summaryRow), children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-table-summary-cell", classNames?.summaryCell), children: /* @__PURE__ */ jsxs2("div", { className: cx2("qt-table-summary", classNames?.summaryControls), children: [
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3("tfoot", { children: /* @__PURE__ */ jsx3("tr", { className: cx2("qt-table-summary-row", classNames?.summaryRow), children: /* @__PURE__ */ jsx3("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-table-summary-cell", classNames?.summaryCell), children: /* @__PURE__ */ jsxs3("div", { className: cx2("qt-table-summary", classNames?.summaryControls), children: [
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -960,8 +1044,8 @@ function DataTable(props) {
                   children: "\u2190 prev"
                 }
               ),
-              /* @__PURE__ */ jsx2("span", { className: cx2("qt-table-summary-hint", classNames?.summaryHint), children: summaryText }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3("span", { className: cx2("qt-table-summary-hint", classNames?.summaryHint), children: summaryText }),
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -976,7 +1060,7 @@ function DataTable(props) {
         ]
       }
     ),
-    menu && (menu.kind === "cell" ? /* @__PURE__ */ jsx2(
+    menu && (menu.kind === "cell" ? /* @__PURE__ */ jsx3(
       CellMenu,
       {
         field: menu.field,
@@ -986,7 +1070,7 @@ function DataTable(props) {
         onAddFilter: (clause) => onQueryChange((prev) => ({ ...prev, offset: 0, where: [...prev.where, clause] })),
         onClose: () => setMenu(null)
       }
-    ) : /* @__PURE__ */ jsx2(
+    ) : /* @__PURE__ */ jsx3(
       HeaderMenu,
       {
         field: menu.field,
@@ -1028,7 +1112,7 @@ function HeaderMenu({
   }, [onClose]);
   const items = [];
   const addSortItem = (placement, dir, label) => items.push(
-    /* @__PURE__ */ jsx2(MenuItem2, { disabled: !sortable, onClick: () => onSetSort(placement, dir), children: label }, `${placement}-${dir}`)
+    /* @__PURE__ */ jsx3(MenuItem2, { disabled: !sortable, onClick: () => onSetSort(placement, dir), children: label }, `${placement}-${dir}`)
   );
   addSortItem("set", "asc", "Set Sort (Asc)");
   addSortItem("set", "desc", "Set Sort (Desc)");
@@ -1036,15 +1120,15 @@ function HeaderMenu({
   addSortItem("append", "desc", "Append Sort (Desc)");
   addSortItem("prepend", "asc", "Prepend Sort (Asc)");
   addSortItem("prepend", "desc", "Prepend Sort (Desc)");
-  items.push(/* @__PURE__ */ jsx2("div", { className: "qt-cm-sep" }, "sep"));
+  items.push(/* @__PURE__ */ jsx3("div", { className: "qt-cm-sep" }, "sep"));
   items.push(
-    /* @__PURE__ */ jsx2(MenuItem2, { disabled: !canRemoveColumn, onClick: onRemove, children: "Remove Column" }, "remove")
+    /* @__PURE__ */ jsx3(MenuItem2, { disabled: !canRemoveColumn, onClick: onRemove, children: "Remove Column" }, "remove")
   );
   const vw = typeof window !== "undefined" ? window.innerWidth : 9999;
   const vh = typeof window !== "undefined" ? window.innerHeight : 9999;
   const left = Math.max(8, Math.min(x, vw - MENU_WIDTH2 - 8));
   const top = Math.max(8, Math.min(y, vh - MENU_ROW_HEIGHT * items.length - 8));
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "qt-cell-menu",
@@ -1053,7 +1137,7 @@ function HeaderMenu({
       onContextMenu: (e) => e.preventDefault(),
       role: "menu",
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "qt-cm-header", children: /* @__PURE__ */ jsx2("span", { className: "qt-cm-field", children: field.label }) }),
+        /* @__PURE__ */ jsx3("div", { className: "qt-cm-header", children: /* @__PURE__ */ jsx3("span", { className: "qt-cm-field", children: field.label }) }),
         items
       ]
     }
@@ -1064,7 +1148,7 @@ function MenuItem2({
   onClick,
   disabled
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -1114,8 +1198,814 @@ function valueToString2(value) {
   return String(value);
 }
 
+// src/SelectColumnEditor.tsx
+import {
+  lazy,
+  Suspense,
+  useEffect as useEffect3,
+  useId,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+import {
+  computedFieldName,
+  FORMULA_FUNCTIONS,
+  isComputedField,
+  isSelectable
+} from "@pythia-software/query-table-core";
+
+// src/previewOrdering.ts
+var collator = new Intl.Collator(void 0, {
+  numeric: true,
+  sensitivity: "base"
+});
+var valueLabel = (value) => value === null ? "NULL" : typeof value === "string" ? value : JSON.stringify(value);
+function mixedRank(group) {
+  const value = JSON.stringify([
+    group.inputs,
+    group.result.value,
+    group.result.error ?? null
+  ]);
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++)
+    hash = Math.imul(hash ^ value.charCodeAt(i), 16777619);
+  return hash >>> 0;
+}
+function compareValue(a, b) {
+  return collator.compare(valueLabel(a), valueLabel(b));
+}
+function sortValue(group, key) {
+  switch (key.kind) {
+    case "input":
+      return group.inputs[key.index] ?? null;
+    case "result":
+      return group.result.error ?? group.result.value;
+    case "count":
+    case "percentage":
+      return group.count;
+  }
+}
+function orderPreviewGroups(groups, sort) {
+  return groups.map((group, index) => ({ group, index })).sort((a, b) => {
+    if (!sort) {
+      const rank = mixedRank(a.group) - mixedRank(b.group);
+      return rank || a.index - b.index;
+    }
+    const comparison = compareValue(
+      sortValue(a.group, sort.key),
+      sortValue(b.group, sort.key)
+    );
+    return (sort.direction === "asc" ? comparison : -comparison) || a.index - b.index;
+  }).map(({ group }) => group);
+}
+
+// src/SelectColumnEditor.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FormulaEditor = lazy(() => import("./FormulaEditor-YCPICDIH.js"));
+var fieldExpression = (name) => `[${name.replace(/\]/g, "]]")}]`;
+var display = (v) => v === null ? "NULL" : typeof v === "string" ? v === "" ? '""' : v : JSON.stringify(v);
+function SelectColumnEditor({
+  api,
+  onClose
+}) {
+  const titleId = useId(), dialog = useRef2(null);
+  const closeRef = useRef2(onClose);
+  closeRef.current = onClose;
+  const [columns, setColumns] = useState4(
+    () => api.select.visible.map((c) => ({ ...c }))
+  );
+  const [search, setSearch] = useState4(""), [active, setActive] = useState4(api.select.visible[0]?.field ?? "");
+  const [editing, setEditing] = useState4(false), [id, setId] = useState4(""), [revision, setRevision] = useState4(null);
+  const [label, setLabel] = useState4(""), [source, setSource] = useState4("");
+  const [count, setCount] = useState4(1e3), [preview, setPreview] = useState4(null), [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null), [notice, setNotice] = useState4(""), [saving, setSaving] = useState4(false);
+  const [filter, setFilter] = useState4("all"), [page, setPage] = useState4(0), [retry, setRetry] = useState4(0), [functionSearch, setFunctionSearch] = useState4("");
+  const [previewSort, setPreviewSort] = useState4(null);
+  const [fieldStats, setFieldStats] = useState4({});
+  const drag = useRef2(null);
+  const [inspection, setInspection] = useState4(null);
+  const catalogue = api.computed.catalogue.filter(isSelectable);
+  const chosen = catalogue.find((f) => f.name === active);
+  const expression = editing ? source : active ? fieldExpression(active) : "";
+  const validation = useMemo2(() => {
+    if (!expression)
+      return { error: "Choose a column or create a computed column." };
+    try {
+      return {
+        plan: api.computed.compile(expression, editing ? id : void 0)
+      };
+    } catch (e) {
+      return { error: e instanceof Error ? e.message : String(e) };
+    }
+  }, [expression, editing, id, api.computed.compile]);
+  const previewPlanKey = validation.error ? `error:${validation.error}` : `plan:${JSON.stringify(validation.plan)}`;
+  const previewRequest = useRef2(api.computed.preview);
+  previewRequest.current = api.computed.preview;
+  const fieldStatsRequest = useRef2(api.fieldStats);
+  fieldStatsRequest.current = api.fieldStats;
+  const catalogueKey = JSON.stringify(catalogue.map((field) => field.name));
+  useEffect3(() => {
+    const previous = document.activeElement;
+    dialog.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        if (document.querySelector(".cm-tooltip-autocomplete")) return;
+        closeRef.current();
+      }
+      if (e.key === "Tab") {
+        const focusable = Array.from(
+          dialog.current?.querySelectorAll(
+            'button:not([disabled]), input:not([disabled]), select, textarea, [tabindex="0"], [contenteditable="true"]'
+          ) ?? []
+        ).filter((el) => el.getClientRects().length);
+        const first = focusable[0], last = focusable[focusable.length - 1];
+        if (e.shiftKey && (document.activeElement === first || document.activeElement === dialog.current)) {
+          e.preventDefault();
+          last?.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const old = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = old;
+      previous?.focus();
+    };
+  }, []);
+  useEffect3(() => {
+    const ac = new AbortController();
+    void fieldStatsRequest.current(
+      catalogue.map((field) => field.name),
+      ac.signal
+    ).then((result) => {
+      if (!ac.signal.aborted) setFieldStats(result);
+    }).catch(() => {
+    });
+    return () => ac.abort();
+  }, [catalogueKey]);
+  useEffect3(() => {
+    const ac = new AbortController();
+    setPreview(null);
+    setError(null);
+    setPage(0);
+    setInspection(null);
+    if (validation.error || !Number.isInteger(count) || count < 1 || count > 1e4) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    const timer = setTimeout(() => {
+      const request = previewRequest.current;
+      void request(
+        expression,
+        count,
+        ac.signal,
+        editing ? id : void 0,
+        editing
+      ).then((result) => {
+        if (!ac.signal.aborted) setPreview(result);
+      }).catch((e) => {
+        if (!ac.signal.aborted)
+          setError(e instanceof Error ? e.message : String(e));
+      }).finally(() => {
+        if (!ac.signal.aborted) setLoading(false);
+      });
+    }, 400);
+    return () => {
+      ac.abort();
+      clearTimeout(timer);
+    };
+  }, [expression, count, editing, id, previewPlanKey, retry]);
+  const move = (field, index) => setColumns((cols) => {
+    const next = cols.filter((c) => c.field !== field), item = cols.find((c) => c.field === field);
+    if (item) next.splice(Math.max(0, Math.min(index, next.length)), 0, item);
+    return next;
+  });
+  const toggle = (field) => setColumns(
+    (cols) => cols.some((c) => c.field === field) ? cols.filter((c) => c.field !== field) : [...cols, { field }]
+  );
+  function browse(field) {
+    setActive(field);
+    setEditing(false);
+    setNotice("");
+  }
+  function edit(defId) {
+    const def = api.computed.definitions.find((d) => d.id === defId);
+    setId(def?.id ?? defId ?? crypto.randomUUID());
+    setRevision(def?.revision ?? null);
+    setLabel(def?.label ?? defId ?? "");
+    setSource(
+      def?.expression.source ?? (defId ? "" : active ? fieldExpression(active) : "LEFT([field], 3)")
+    );
+    setEditing(true);
+    setNotice("");
+  }
+  async function save() {
+    setSaving(true);
+    setError(null);
+    try {
+      const def = await api.computed.save(
+        {
+          id,
+          label: label.trim(),
+          expression: { language: "qt-expr", version: 1, source }
+        },
+        revision
+      );
+      setRevision(def.revision);
+      const field = computedFieldName(def.id);
+      setActive(field);
+      setColumns(
+        (cols) => cols.some((c) => c.field === field) ? cols : [...cols, { field }]
+      );
+      setNotice(
+        "Definition saved. All queries referencing this ID now use this definition. Apply columns to update this query\u2019s layout."
+      );
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+  const groups = useMemo2(
+    () => orderPreviewGroups(
+      (preview?.groups ?? []).filter(
+        (g) => filter === "errors" ? !!g.result.error : filter === "nulls" ? !g.result.error && g.result.value === null : true
+      ),
+      previewSort
+    ),
+    [preview, filter, previewSort]
+  );
+  const catalogueResults = useMemo2(
+    () => catalogue.filter(
+      (f) => `${f.label} ${f.name} ${f.type} ${f.group ?? ""}`.toLowerCase().includes(search.toLowerCase())
+    ).map((field, index) => ({ field, index })).sort((a, b) => {
+      const aLow = (fieldStats[a.field.name]?.distinct ?? 2) <= 1;
+      const bLow = (fieldStats[b.field.name]?.distinct ?? 2) <= 1;
+      return Number(aLow) - Number(bLow) || a.index - b.index;
+    }).map(({ field }) => field),
+    [catalogue, search, fieldStats]
+  );
+  const shown = groups.slice(page * 50, (page + 1) * 50);
+  const samePreviewSortKey = (a, b) => {
+    if (a.kind !== b.kind) return false;
+    if (a.kind === "input" && b.kind === "input")
+      return a.index === b.index;
+    return true;
+  };
+  const selectPreviewSort = (key, direction) => {
+    setPreviewSort((current) => {
+      const sameKey = !!current && samePreviewSortKey(current.key, key);
+      return sameKey ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction };
+    });
+    setPage(0);
+  };
+  const previewSortDirection = (key) => previewSort && samePreviewSortKey(previewSort.key, key) ? previewSort.direction : void 0;
+  const previewAriaSort = (key) => {
+    const direction = previewSortDirection(key);
+    return direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none";
+  };
+  const previewSortHeader = (label2, key, direction = "asc") => {
+    const currentDirection = previewSortDirection(key);
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: "qt-preview-sort",
+        onClick: () => selectPreviewSort(key, direction),
+        title: `Sort by ${label2}`,
+        children: [
+          label2,
+          currentDirection && (currentDirection === "asc" ? " \u2191" : " \u2193")
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx4("div", { className: "qt-modal-backdrop qt-select-editor-backdrop", children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "qt-select-editor",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      ref: dialog,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxs4("header", { className: "qt-select-editor-header", children: [
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx4("h2", { id: titleId, children: "Select columns" }),
+            /* @__PURE__ */ jsx4("p", { children: "Arrange your view, explore values, and create reusable computed columns." })
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "qt-btn",
+              onClick: onClose,
+              "aria-label": "Close column editor",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "qt-select-editor-body", children: [
+          /* @__PURE__ */ jsxs4("aside", { className: "qt-selected-panel", children: [
+            /* @__PURE__ */ jsxs4("h3", { children: [
+              "Selected ",
+              /* @__PURE__ */ jsx4("span", { className: "qt-muted", children: columns.length })
+            ] }),
+            /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "Drag to reorder, or use the arrow buttons." }),
+            /* @__PURE__ */ jsx4("ol", { className: "qt-editor-columns", children: columns.map((c, i) => {
+              const f = catalogue.find((f2) => f2.name === c.field);
+              return /* @__PURE__ */ jsxs4(
+                "li",
+                {
+                  draggable: true,
+                  onDragStart: (e) => {
+                    drag.current = c.field;
+                    e.dataTransfer.setData("text/plain", c.field);
+                  },
+                  onDragOver: (e) => e.preventDefault(),
+                  onDrop: (e) => {
+                    e.preventDefault();
+                    if (drag.current) move(drag.current, i);
+                    drag.current = null;
+                  },
+                  onDragEnd: () => {
+                    drag.current = null;
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u283F" }),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-column-name",
+                        onClick: () => browse(c.field),
+                        children: f?.label ?? c.field
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-icon-btn",
+                        disabled: i === 0,
+                        onClick: () => move(c.field, i - 1),
+                        "aria-label": `Move ${f?.label ?? c.field} up`,
+                        children: "\u2191"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-icon-btn",
+                        disabled: i === columns.length - 1,
+                        onClick: () => move(c.field, i + 1),
+                        "aria-label": `Move ${f?.label ?? c.field} down`,
+                        children: "\u2193"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-icon-btn",
+                        onClick: () => toggle(c.field),
+                        "aria-label": `Remove ${f?.label ?? c.field}`,
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                },
+                c.field
+              );
+            }) }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "qt-link-btn",
+                onClick: () => setColumns(
+                  api.defaults.select.length ? api.defaults.select : catalogue.filter((f) => f.select?.default).map((f) => ({ field: f.name }))
+                ),
+                children: "Use default columns"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("aside", { className: "qt-catalogue-panel", children: [
+            /* @__PURE__ */ jsx4("h3", { children: "Column catalogue" }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                className: "qt-input",
+                "aria-label": "Search columns",
+                placeholder: "Search name or type\u2026",
+                value: search,
+                onChange: (e) => setSearch(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "qt-btn qt-create-computed",
+                onClick: () => edit(),
+                children: "\uFF0B Computed column"
+              }
+            ),
+            api.computed.loading && /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading definitions\u2026" }),
+            api.computed.error && /* @__PURE__ */ jsx4("p", { role: "alert", children: api.computed.error }),
+            /* @__PURE__ */ jsx4("div", { className: "qt-catalogue-list", children: catalogueResults.map((f) => {
+              const distinct = fieldStats[f.name]?.distinct;
+              return /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: `qt-catalogue-item ${active === f.name && !editing ? "is-active" : ""} ${distinct != null && distinct <= 1 ? "is-low-cardinality" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "input",
+                      {
+                        type: "checkbox",
+                        "aria-label": `Include ${f.label}`,
+                        checked: columns.some((c) => c.field === f.name),
+                        onChange: () => toggle(f.name)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4("button", { type: "button", onClick: () => browse(f.name), children: [
+                      /* @__PURE__ */ jsx4("strong", { children: f.label }),
+                      /* @__PURE__ */ jsxs4("small", { children: [
+                        isComputedField(f.name) ? "\u0192 \xB7 " : "",
+                        f.type,
+                        " \xB7 ",
+                        f.group ?? f.name,
+                        distinct != null && ` \xB7 ${distinct.toLocaleString()} distinct`
+                      ] })
+                    ] })
+                  ]
+                },
+                f.name
+              );
+            }) }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "qt-link-btn",
+                onClick: () => void api.computed.reload(),
+                children: "Reload shared definitions"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("section", { className: "qt-column-workbench", children: [
+            editing ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+              /* @__PURE__ */ jsxs4("div", { className: "qt-editor-title", children: [
+                /* @__PURE__ */ jsx4("h3", { children: revision ? "Edit shared computed column" : "New computed column" }),
+                /* @__PURE__ */ jsx4("span", { className: "qt-type-badge", children: validation.plan?.type ?? "Check formula" })
+              ] }),
+              /* @__PURE__ */ jsxs4("label", { className: "qt-editor-label", children: [
+                "Column name",
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    className: "qt-input",
+                    value: label,
+                    maxLength: 200,
+                    onChange: (e) => setLabel(e.target.value),
+                    placeholder: "e.g. Email domain"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4(
+                Suspense,
+                {
+                  fallback: /* @__PURE__ */ jsx4(
+                    "textarea",
+                    {
+                      "aria-label": "Computed column formula",
+                      value: source,
+                      onChange: (e) => setSource(e.target.value)
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx4(
+                    FormulaEditor,
+                    {
+                      value: source,
+                      onChange: setSource,
+                      fields: api.computed.catalogue.filter(
+                        (f) => f.name !== computedFieldName(id)
+                      ),
+                      compile: (value) => api.computed.compile(value, id)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs4("details", { className: "qt-function-library", children: [
+                /* @__PURE__ */ jsx4("summary", { children: "Functions & examples" }),
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    className: "qt-input",
+                    "aria-label": "Search functions",
+                    placeholder: "Search functions\u2026",
+                    value: functionSearch,
+                    onChange: (e) => setFunctionSearch(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx4("div", { className: "qt-function-list", children: FORMULA_FUNCTIONS.filter(
+                  (f) => `${f.name} ${f.description}`.toLowerCase().includes(functionSearch.toLowerCase())
+                ).map((f) => /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    title: f.description,
+                    onClick: () => setSource(`${f.name}(${source})`),
+                    children: [
+                      /* @__PURE__ */ jsx4("code", { children: f.signature }),
+                      /* @__PURE__ */ jsx4("small", { children: f.description })
+                    ]
+                  },
+                  f.name
+                )) }),
+                /* @__PURE__ */ jsxs4("p", { children: [
+                  "Examples: ",
+                  /* @__PURE__ */ jsx4("code", { children: "LEFT([name], 3)" }),
+                  " \xB7",
+                  " ",
+                  /* @__PURE__ */ jsx4("code", { children: 'IF([amount] > 100, "High", "Low")' }),
+                  " \xB7",
+                  " ",
+                  /* @__PURE__ */ jsx4("code", { children: 'REGEX_EXTRACT([email], "@(.+)$", 1)' })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs4("div", { className: "qt-definition-actions", children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    disabled: saving || !!validation.error || !label.trim(),
+                    onClick: () => void save(),
+                    children: saving ? "Saving\u2026" : revision ? "Save shared definition" : "Save definition & add column"
+                  }
+                ),
+                revision && /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-link-btn",
+                    onClick: () => edit(id),
+                    children: "Reload editor from catalogue"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "Saving changes this definition across all queries. Cancel below only discards column layout changes." })
+            ] }) : /* @__PURE__ */ jsxs4("div", { className: "qt-editor-title", children: [
+              /* @__PURE__ */ jsxs4("div", { children: [
+                /* @__PURE__ */ jsx4("h3", { children: chosen?.label ?? "Explore a column" }),
+                /* @__PURE__ */ jsxs4("p", { className: "qt-muted", children: [
+                  chosen?.name,
+                  " ",
+                  chosen ? `\xB7 ${chosen.type}` : ""
+                ] })
+              ] }),
+              chosen && isComputedField(chosen.name) && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    onClick: () => edit(chosen.name.slice(10)),
+                    children: "Edit definition"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    onClick: () => {
+                      const def = api.computed.definitions.find(
+                        (d) => computedFieldName(d.id) === chosen.name
+                      );
+                      edit();
+                      if (def) {
+                        setLabel(`${def.label} copy`);
+                        setSource(def.expression.source);
+                      }
+                    },
+                    children: "Duplicate"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "qt-preview-controls", children: [
+              /* @__PURE__ */ jsxs4("label", { children: [
+                "Rows to process",
+                " ",
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    className: "qt-input",
+                    type: "number",
+                    min: 1,
+                    max: 1e4,
+                    step: 1,
+                    value: Number.isNaN(count) ? "" : count,
+                    onChange: (e) => setCount(e.target.valueAsNumber)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "qt-btn",
+                  onClick: () => setRetry((n) => n + 1),
+                  children: "Refresh preview"
+                }
+              ),
+              /* @__PURE__ */ jsxs4("label", { children: [
+                "Show",
+                " ",
+                /* @__PURE__ */ jsxs4(
+                  "select",
+                  {
+                    value: filter,
+                    onChange: (e) => {
+                      setFilter(e.target.value);
+                      setPage(0);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx4("option", { value: "all", children: "All results" }),
+                      /* @__PURE__ */ jsx4("option", { value: "nulls", children: "Null results" }),
+                      /* @__PURE__ */ jsx4("option", { value: "errors", children: "Errors" })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "First matching rows in current sort order, starting at row 1. Counts describe the processed sample. Maximum 10,000 rows." }),
+            (!Number.isInteger(count) || count < 1 || count > 1e4) && /* @__PURE__ */ jsx4("p", { role: "alert", children: "Choose a whole number between 1 and 10,000." }),
+            validation.error && /* @__PURE__ */ jsx4("p", { className: "qt-formula-error", role: "alert", children: validation.error }),
+            error && /* @__PURE__ */ jsx4("p", { className: "qt-formula-error", role: "alert", children: error }),
+            notice && /* @__PURE__ */ jsx4("p", { className: "qt-editor-notice", role: "status", children: notice }),
+            loading && /* @__PURE__ */ jsx4("p", { role: "status", children: "Processing preview\u2026" }),
+            preview && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+              /* @__PURE__ */ jsxs4("p", { className: "qt-preview-summary", role: "status", children: [
+                /* @__PURE__ */ jsx4("strong", { children: preview.processed.toLocaleString() }),
+                " of",
+                " ",
+                preview.total.toLocaleString(),
+                " matching rows \xB7",
+                " ",
+                /* @__PURE__ */ jsx4("strong", { children: preview.groups.length.toLocaleString() }),
+                " ",
+                "distinct combinations \xB7 ",
+                preview.nulls.toLocaleString(),
+                " null \xB7 ",
+                preview.errors.toLocaleString(),
+                " errors",
+                preview.processed === preview.total ? " \xB7 complete filtered set" : " \xB7 sample"
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "qt-preview-table-wrap", children: /* @__PURE__ */ jsxs4("table", { className: "qt-preview-table", children: [
+                /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
+                  editing && preview.dependencies.map((name, index) => /* @__PURE__ */ jsx4(
+                    "th",
+                    {
+                      "aria-sort": previewAriaSort({
+                        kind: "input",
+                        index
+                      }),
+                      children: previewSortHeader(
+                        api.computed.catalogue.find(
+                          (f) => f.name === name
+                        )?.label ?? name,
+                        { kind: "input", index }
+                      )
+                    },
+                    name
+                  )),
+                  /* @__PURE__ */ jsx4("th", { "aria-sort": previewAriaSort({ kind: "result" }), children: previewSortHeader(editing ? "Result" : "Value", {
+                    kind: "result"
+                  }) }),
+                  /* @__PURE__ */ jsx4("th", { "aria-sort": previewAriaSort({ kind: "count" }), children: previewSortHeader("Count", { kind: "count" }, "desc") }),
+                  /* @__PURE__ */ jsx4("th", { "aria-sort": previewAriaSort({ kind: "percentage" }), children: previewSortHeader("%", { kind: "percentage" }, "desc") })
+                ] }) }),
+                /* @__PURE__ */ jsx4("tbody", { children: shown.map((group, i) => /* @__PURE__ */ jsxs4("tr", { children: [
+                  editing && group.inputs.map((value, j) => /* @__PURE__ */ jsx4("td", { title: display(value), children: display(value) }, j)),
+                  /* @__PURE__ */ jsxs4(
+                    "td",
+                    {
+                      className: group.result.error ? "qt-formula-error" : "",
+                      title: group.result.error ?? display(group.result.value),
+                      children: [
+                        group.result.error ?? display(group.result.value),
+                        group.result.regex && /* @__PURE__ */ jsx4(
+                          "button",
+                          {
+                            type: "button",
+                            className: "qt-link-btn",
+                            onClick: () => setInspection(group.result.regex),
+                            children: "Inspect match"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("td", { children: group.count.toLocaleString() }),
+                  /* @__PURE__ */ jsxs4("td", { children: [
+                    (100 * group.count / preview.processed).toFixed(
+                      1
+                    ),
+                    "%"
+                  ] })
+                ] }, i)) })
+              ] }) }),
+              inspection && /* @__PURE__ */ jsxs4("div", { className: "qt-regex-inspector", children: [
+                /* @__PURE__ */ jsx4("h4", { children: "Regex match" }),
+                /* @__PURE__ */ jsxs4("pre", { children: [
+                  inspection.input.slice(0, inspection.start),
+                  /* @__PURE__ */ jsx4("mark", { children: inspection.input.slice(
+                    inspection.start,
+                    inspection.end
+                  ) }),
+                  inspection.input.slice(inspection.end)
+                ] }),
+                /* @__PURE__ */ jsx4("dl", { children: inspection.groups.map((value, i) => /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsxs4("dt", { children: [
+                    "Group ",
+                    i,
+                    i === 0 ? " (whole match)" : ""
+                  ] }),
+                  /* @__PURE__ */ jsx4("dd", { children: display(value) })
+                ] }, i)) })
+              ] }),
+              !groups.length && /* @__PURE__ */ jsx4("p", { children: "No matching results in this sample." }),
+              groups.length > 50 && /* @__PURE__ */ jsxs4("div", { className: "qt-preview-pages", children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    disabled: page === 0,
+                    onClick: () => setPage((n) => n - 1),
+                    children: "Previous"
+                  }
+                ),
+                /* @__PURE__ */ jsxs4("span", { children: [
+                  "Combinations ",
+                  page * 50 + 1,
+                  "\u2013",
+                  Math.min((page + 1) * 50, groups.length),
+                  " of",
+                  " ",
+                  groups.length
+                ] }),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    disabled: (page + 1) * 50 >= groups.length,
+                    onClick: () => setPage((n) => n + 1),
+                    children: "Next"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("footer", { className: "qt-select-editor-footer", children: [
+          /* @__PURE__ */ jsx4("span", { className: "qt-muted", children: "Computed columns are display-only. Select at least one column." }),
+          /* @__PURE__ */ jsx4("button", { type: "button", className: "qt-btn", onClick: onClose, children: "Cancel layout changes" }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "qt-btn qt-primary",
+              disabled: !columns.length || columns.length > 200,
+              onClick: () => {
+                api.setQuery((q) => ({ ...q, select: columns }));
+                onClose();
+              },
+              children: "Apply columns"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
 // src/QueryBuilder.tsx
-import { useEffect as useEffect4, useId, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { Fragment as Fragment6, useEffect as useEffect5, useId as useId2, useMemo as useMemo4, useRef as useRef3, useState as useState6 } from "react";
 import {
   NULLARY_OPS as NULLARY_OPS2,
   aggOpNeedsField,
@@ -1124,16 +2014,19 @@ import {
   filterValues as filterValuesFor,
   isGroupable,
   isMeasurable,
+  isOrGroup,
+  opPairsForField as opPairsForField2,
+  predicatesOf,
   queriesEqual,
-  isFilterable,
-  isSelectable,
+  isFilterable as isFilterable2,
+  isSelectable as isSelectable2,
   isSortable as isSortable2,
   opsForField as opsForField2
 } from "@pythia-software/query-table-core";
 
 // src/FieldPicker.tsx
-import { useMemo as useMemo2, useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo as useMemo3, useState as useState5 } from "react";
+import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var UNGROUPED = "other";
 function FieldPicker({
   fields,
@@ -1143,10 +2036,10 @@ function FieldPicker({
   onPick,
   onClose
 }) {
-  const [search, setSearch] = useState3("");
+  const [search, setSearch] = useState5("");
   const needle = search.trim().toLowerCase();
-  const excludedSet = useMemo2(() => new Set(excluded ?? []), [excluded]);
-  const matched = useMemo2(
+  const excludedSet = useMemo3(() => new Set(excluded ?? []), [excluded]);
+  const matched = useMemo3(
     () => fields.filter((f) => {
       if (excludedSet.has(f.name)) return false;
       if (!needle) return true;
@@ -1154,10 +2047,10 @@ function FieldPicker({
     }),
     [fields, excludedSet, needle]
   );
-  const grouped = useMemo2(() => groupByGroup(matched), [matched]);
+  const grouped = useMemo3(() => groupByGroup(matched), [matched]);
   const firstEnabled = matched.find((f) => isEnabled(f, stats, gateOnDistinct));
-  return /* @__PURE__ */ jsxs3("div", { className: "qt-picker", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs5("div", { className: "qt-picker", children: [
+    /* @__PURE__ */ jsx5(
       "input",
       {
         autoFocus: true,
@@ -1176,13 +2069,13 @@ function FieldPicker({
         onBlur: () => setTimeout(() => onClose?.(), 150)
       }
     ),
-    /* @__PURE__ */ jsx3("div", { className: "qt-picker-list", children: matched.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "qt-picker-empty", children: "no matches" }) : grouped.map(([group, fs]) => /* @__PURE__ */ jsxs3("div", { className: "qt-picker-group", children: [
-      /* @__PURE__ */ jsx3("div", { className: "qt-picker-group-label", children: group }),
+    /* @__PURE__ */ jsx5("div", { className: "qt-picker-list", children: matched.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "qt-picker-empty", children: "no matches" }) : grouped.map(([group, fs]) => /* @__PURE__ */ jsxs5("div", { className: "qt-picker-group", children: [
+      /* @__PURE__ */ jsx5("div", { className: "qt-picker-group-label", children: group }),
       fs.map((f) => {
         const enabled = isEnabled(f, stats, gateOnDistinct);
         const s = stats?.[f.name];
         const aliasHit = aliasMatch(f, needle);
-        return /* @__PURE__ */ jsxs3(
+        return /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -1196,20 +2089,20 @@ function FieldPicker({
               setSearch("");
             },
             children: [
-              /* @__PURE__ */ jsxs3("span", { className: "qt-picker-row", children: [
-                /* @__PURE__ */ jsx3("span", { className: "qt-picker-label", children: f.label }),
-                /* @__PURE__ */ jsx3("span", { className: "qt-picker-name", children: f.name })
+              /* @__PURE__ */ jsxs5("span", { className: "qt-picker-row", children: [
+                /* @__PURE__ */ jsx5("span", { className: "qt-picker-label", children: f.label }),
+                /* @__PURE__ */ jsx5("span", { className: "qt-picker-name", children: f.name })
               ] }),
-              aliasHit && /* @__PURE__ */ jsxs3("span", { className: "qt-picker-alias", children: [
+              aliasHit && /* @__PURE__ */ jsxs5("span", { className: "qt-picker-alias", children: [
                 "matches: ",
                 aliasHit
               ] }),
-              s && /* @__PURE__ */ jsxs3("span", { className: "qt-picker-stats", children: [
-                s.distinct != null && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+              s && /* @__PURE__ */ jsxs5("span", { className: "qt-picker-stats", children: [
+                s.distinct != null && /* @__PURE__ */ jsxs5(Fragment5, { children: [
                   s.distinct,
                   " distinct"
                 ] }),
-                s.min != null && s.max != null && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                s.min != null && s.max != null && /* @__PURE__ */ jsxs5(Fragment5, { children: [
                   " ",
                   "\xB7 ",
                   fmtStat(s.min),
@@ -1263,17 +2156,17 @@ function fmtStat(v) {
 }
 
 // src/SavedQueriesModal.tsx
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SavedQueriesModal({ saved, onClose, onLoad }) {
-  useEffect3(() => {
+  useEffect4(() => {
     function onKey(e) {
       if (e.key === "Escape") onClose();
     }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
-  return /* @__PURE__ */ jsx4("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx6("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "qt-modal",
@@ -1282,12 +2175,12 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
       "aria-modal": "true",
       "aria-label": "Saved queries",
       children: [
-        /* @__PURE__ */ jsx4("h3", { className: "qt-modal-title", children: "Saved queries" }),
-        saved.loading ? /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "Loading\u2026" }) : saved.items.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "None saved yet. Save the current query from the toolbar." }) : /* @__PURE__ */ jsx4("ul", { className: "qt-saved-list", children: saved.items.map((s) => {
+        /* @__PURE__ */ jsx6("h3", { className: "qt-modal-title", children: "Saved queries" }),
+        saved.loading ? /* @__PURE__ */ jsx6("p", { className: "qt-muted", children: "Loading\u2026" }) : saved.items.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "qt-muted", children: "None saved yet. Save the current query from the toolbar." }) : /* @__PURE__ */ jsx6("ul", { className: "qt-saved-list", children: saved.items.map((s) => {
           const filters = s.query.where.length;
           const isDefault = saved.defaultId === s.id;
-          return /* @__PURE__ */ jsxs4("li", { className: "qt-saved-item", children: [
-            /* @__PURE__ */ jsxs4(
+          return /* @__PURE__ */ jsxs6("li", { className: "qt-saved-item", children: [
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 type: "button",
@@ -1298,8 +2191,8 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                   onClose();
                 },
                 children: [
-                  /* @__PURE__ */ jsx4("span", { className: "qt-saved-name", children: s.name }),
-                  /* @__PURE__ */ jsxs4("span", { className: "qt-saved-meta qt-muted", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "qt-saved-name", children: s.name }),
+                  /* @__PURE__ */ jsxs6("span", { className: "qt-saved-meta qt-muted", children: [
                     isDefault ? "Default view \xB7 " : "",
                     new Date(s.savedAt).toLocaleString(),
                     " \xB7 ",
@@ -1310,7 +2203,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                 ]
               }
             ),
-            isDefault ? /* @__PURE__ */ jsx4(
+            isDefault ? /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -1319,7 +2212,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                 onClick: () => void saved.clearDefault(),
                 children: "default"
               }
-            ) : /* @__PURE__ */ jsx4(
+            ) : /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -1329,7 +2222,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                 children: "make default"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -1341,14 +2234,14 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
             )
           ] }, s.id);
         }) }),
-        /* @__PURE__ */ jsx4("div", { className: "qt-modal-footer", children: /* @__PURE__ */ jsx4("button", { type: "button", className: "qt-btn", onClick: onClose, children: "close" }) })
+        /* @__PURE__ */ jsx6("div", { className: "qt-modal-footer", children: /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-btn", onClick: onClose, children: "close" }) })
       ]
     }
   ) });
 }
 
 // src/QueryBuilder.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var cx3 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
 var MAX_AUTO_REFRESH_POLLS = 1e3;
 var DEFAULT_AUTO_REFRESH_FREQUENCY_MS = 2e4;
@@ -1392,8 +2285,8 @@ function formatStatusTime(ms) {
   return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit", second: "2-digit" });
 }
 function useFieldHasNull(api, fieldName) {
-  const [hasNull, setHasNull] = useState4(void 0);
-  useEffect4(() => {
+  const [hasNull, setHasNull] = useState6(void 0);
+  useEffect5(() => {
     if (!fieldName) return;
     let cancelled = false;
     void api.filterValues(fieldName, "").then((r) => {
@@ -1409,17 +2302,29 @@ function useFieldHasNull(api, fieldName) {
   }, [api, fieldName]);
   return hasNull;
 }
-function whereClauseAsText(clause, byName) {
+var CONVERGED_NEGATIVE_OPS = /* @__PURE__ */ new Set(["!=", "is_not_null", "not_matches_regex"]);
+function positiveOpsForField(field) {
+  return opsForField2(field).filter((op) => !CONVERGED_NEGATIVE_OPS.has(op));
+}
+function predicateAsText(clause, byName) {
   const field = byName.get(clause.field)?.label ?? clause.field;
   const op = clause.op.replace(/_/g, " ");
-  if (NULLARY_OPS2.has(clause.op)) return `${field} ${op}`;
-  const value = clause.value === "" ? "''" : clause.value;
-  return `${field} ${op} ${value}`;
+  const not = clause.negated ? "not " : "";
+  if (NULLARY_OPS2.has(clause.op)) return `${field} ${not}${op}`;
+  const strategy = byName.get(clause.field)?.filter?.values;
+  const option = strategy?.source === "static" ? strategy.options.find((o) => typeof o !== "string" && o.value === clause.value) : void 0;
+  const value = clause.value === "" ? "''" : typeof option === "object" ? option.label : clause.value;
+  return `${field} ${not}${op} ${value}`;
+}
+function whereTermAsText(term, byName) {
+  if (isOrGroup(term)) return `(${term.any.map((c) => predicateAsText(c, byName)).join(" or ")})`;
+  return predicateAsText(term, byName);
 }
 function orderByAsText(term, byName) {
   const field = byName.get(term.field)?.label ?? term.field;
+  const expression = term.extract ? `regex_extract(${field}, /${term.extract.regex}/)` : field;
   const nulls = term.nulls ? ` nulls ${term.nulls}` : "";
-  return `${field} ${term.dir}${nulls}`;
+  return `${expression} ${term.dir}${nulls}`;
 }
 function chipFieldWidthChars(text, fallback = 5, max = 30) {
   return Math.min(max, Math.max(fallback, (text || "").length + 1));
@@ -1428,16 +2333,13 @@ function chipFieldWidthForInput(text, fieldType, fallback = 5, padding = 0) {
   const cap = fieldType === "number" ? 10 : 30;
   return chipFieldWidthChars(text, fallback, cap) + padding;
 }
-function chipFieldWidthForSelect(text, fallback = 3, max = 30) {
-  return chipFieldWidthChars(text, fallback, max) + 2;
-}
 function buildCollapsedSummary(where, orderBy, byName) {
-  const whereText = where.length === 0 ? "all rows" : where.map((c) => whereClauseAsText(c, byName)).join(" and ");
+  const whereText = whereClauseSummaryText(where, byName);
   const orderText = orderBy.length === 0 ? "(default)" : orderBy.map((term) => orderByAsText(term, byName)).join(", ");
   return `WHERE ${whereText} ORDER BY ${orderText}`;
 }
 function whereClauseSummaryText(where, byName) {
-  return where.length === 0 ? "all rows" : where.map((c) => whereClauseAsText(c, byName)).join(" and ");
+  return where.length === 0 ? "all rows" : where.map((t) => whereTermAsText(t, byName)).join(" and ");
 }
 function orderBySummaryText(orderBy, byName) {
   return orderBy.length === 0 ? "(default)" : orderBy.map((term) => orderByAsText(term, byName)).join(", ");
@@ -1453,15 +2355,15 @@ function QueryBuilder({
   defaultCollapsed = false
 }) {
   const UNSAVED_QUERY_EDIT_ID = "__qt-unsaved-query__";
-  const [showSaved, setShowSaved] = useState4(false);
-  const [shareCopied, setShareCopied] = useState4(false);
-  const [showAutoRefresh, setShowAutoRefresh] = useState4(false);
-  const [autoRefreshFrequencyMs, setAutoRefreshFrequencyMs] = useState4(DEFAULT_AUTO_REFRESH_FREQUENCY_MS);
-  const [autoRefreshTurnOffAfterMs, setAutoRefreshTurnOffAfterMs] = useState4(DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS);
-  const [editingSavedId, setEditingSavedId] = useState4(null);
-  const [editingSavedName, setEditingSavedName] = useState4("");
-  const [lastSavedId, setLastSavedId] = useState4(null);
-  const [collapsedFallback, setCollapsedFallback] = useState4(defaultCollapsed);
+  const [showSaved, setShowSaved] = useState6(false);
+  const [shareCopied, setShareCopied] = useState6(false);
+  const [showAutoRefresh, setShowAutoRefresh] = useState6(false);
+  const [autoRefreshFrequencyMs, setAutoRefreshFrequencyMs] = useState6(DEFAULT_AUTO_REFRESH_FREQUENCY_MS);
+  const [autoRefreshTurnOffAfterMs, setAutoRefreshTurnOffAfterMs] = useState6(DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS);
+  const [editingSavedId, setEditingSavedId] = useState6(null);
+  const [editingSavedName, setEditingSavedName] = useState6("");
+  const [lastSavedId, setLastSavedId] = useState6(null);
+  const [collapsedFallback, setCollapsedFallback] = useState6(defaultCollapsed);
   const collapsedControlled = typeof collapsed !== "undefined";
   const isCollapsed = collapsedControlled ? collapsed : collapsedFallback;
   const setCollapsed = (next) => {
@@ -1471,31 +2373,31 @@ function QueryBuilder({
     }
     setCollapsedFallback(next);
   };
-  const [lastUpdatedAt, setLastUpdatedAt] = useState4(null);
-  const [lastFailureAt, setLastFailureAt] = useState4(null);
-  const byName = useMemo3(() => new Map(fields.map((f) => [f.name, f])), [fields]);
-  const activeSavedQuery = useMemo3(
+  const [lastUpdatedAt, setLastUpdatedAt] = useState6(null);
+  const [lastFailureAt, setLastFailureAt] = useState6(null);
+  const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const activeSavedQuery = useMemo4(
     () => api.saved.items.find((item) => queriesEqual(item.query, api.query)),
     [api.query, api.saved.items]
   );
-  const lastSavedQuery = useMemo3(
+  const lastSavedQuery = useMemo4(
     () => api.saved.items.find((item) => item.id === lastSavedId) ?? null,
     [api.saved.items, lastSavedId]
   );
   const isSavedQuery = activeSavedQuery != null;
   const isEditingUnsaved = editingSavedId === UNSAVED_QUERY_EDIT_ID;
-  const bodyId = useId();
+  const bodyId = useId2();
   const isEditingSaved = editingSavedId != null && activeSavedQuery?.id === editingSavedId;
   const showUpdateButton = Boolean(lastSavedQuery) && !activeSavedQuery;
-  const collapsedSummary = useMemo3(
+  const collapsedSummary = useMemo4(
     () => buildCollapsedSummary(api.query.where, api.query.orderBy, byName),
     [api.query.where, api.query.orderBy, byName]
   );
-  const collapsedWhereText = useMemo3(
+  const collapsedWhereText = useMemo4(
     () => whereClauseSummaryText(api.query.where, byName),
     [api.query.where, byName]
   );
-  const collapsedOrderText = useMemo3(
+  const collapsedOrderText = useMemo4(
     () => orderBySummaryText(api.query.orderBy, byName),
     [api.query.orderBy, byName]
   );
@@ -1507,27 +2409,27 @@ function QueryBuilder({
   const lastUpdatedText = formatStatusTime(lastUpdatedAt);
   const failureText = api.error ? `Error: ${api.error.message}` : lastFailureAt ? `Last failure at ${formatStatusTime(lastFailureAt)}` : null;
   const isBusy = Boolean(running) || api.loading;
-  const lastRowsRef = useRef2(null);
-  const lastTotalRef = useRef2(null);
-  const previousLoadingRef = useRef2(api.loading);
-  const autoRefreshRef = useRef2(null);
-  const autoRefreshPopoverRef = useRef2(null);
-  const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState4(false);
-  const shareFeedbackTimerRef = useRef2(null);
-  useEffect4(
+  const lastRowsRef = useRef3(null);
+  const lastTotalRef = useRef3(null);
+  const previousLoadingRef = useRef3(api.loading);
+  const autoRefreshRef = useRef3(null);
+  const autoRefreshPopoverRef = useRef3(null);
+  const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState6(false);
+  const shareFeedbackTimerRef = useRef3(null);
+  useEffect5(
     () => () => {
       if (shareFeedbackTimerRef.current) clearTimeout(shareFeedbackTimerRef.current);
     },
     []
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setShareCopied(false);
     if (shareFeedbackTimerRef.current) {
       clearTimeout(shareFeedbackTimerRef.current);
       shareFeedbackTimerRef.current = null;
     }
   }, [api.query]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (activeSavedQuery) {
       setLastSavedId(activeSavedQuery.id);
       if (!isEditingSaved) {
@@ -1541,11 +2443,11 @@ function QueryBuilder({
       setEditingSavedName("");
     }
   }, [activeSavedQuery, isEditingSaved, isEditingUnsaved]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!lastSavedId || api.saved.items.some((item) => item.id === lastSavedId)) return;
     setLastSavedId(null);
   }, [api.saved.items, lastSavedId]);
-  useEffect4(() => {
+  useEffect5(() => {
     const hasData = api.rows.length > 0 || total != null;
     const rowsChanged = lastRowsRef.current !== api.rows;
     const totalChanged = lastTotalRef.current !== total;
@@ -1640,15 +2542,15 @@ function QueryBuilder({
       return;
     }
   }
-  useEffect4(() => {
+  useEffect5(() => {
     if (isCollapsed) setShowSaved(false);
   }, [isCollapsed]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!showAutoRefresh || !autoRefreshStatus) return;
     setAutoRefreshFrequencyMs(autoRefreshStatus.frequencyMs);
     setAutoRefreshTurnOffAfterMs(autoRefreshStatus.turnOffAfterMs);
   }, [showAutoRefresh, autoRefreshStatus]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!showAutoRefresh) return;
     function onDocumentClick(event) {
       const wrapper = autoRefreshRef.current;
@@ -1707,11 +2609,11 @@ function QueryBuilder({
       window.prompt("Copy this query URL", url.toString());
     }
   }
-  return /* @__PURE__ */ jsxs5("div", { className: cx3("qt-qb", classNames?.root), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "qt-qb-bar qt-qb-state-bar qt-qb-row", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "qt-qb-state-main", children: [
-        /* @__PURE__ */ jsxs5("span", { className: "qt-qb-saved", children: [
-          /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs7("div", { className: cx3("qt-qb", classNames?.root), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "qt-qb-bar qt-qb-state-bar qt-qb-row", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "qt-qb-state-main", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "qt-qb-saved", children: [
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1722,8 +2624,8 @@ function QueryBuilder({
               children: isSavedQuery ? "\u2605" : "\u2606"
             }
           ),
-          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs5("span", { className: "qt-qb-saved-input-wrap", children: [
-            /* @__PURE__ */ jsx5(
+          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs7("span", { className: "qt-qb-saved-input-wrap", children: [
+            /* @__PURE__ */ jsx7(
               "input",
               {
                 type: "text",
@@ -1746,7 +2648,7 @@ function QueryBuilder({
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1760,7 +2662,7 @@ function QueryBuilder({
                 children: "\u2715"
               }
             )
-          ] }) : /* @__PURE__ */ jsx5(
+          ] }) : /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1770,17 +2672,17 @@ function QueryBuilder({
             }
           )
         ] }),
-        isCollapsed ? /* @__PURE__ */ jsxs5("span", { className: "qt-qb-summary qt-truncate", title: collapsedSummary, children: [
-          /* @__PURE__ */ jsx5("span", { className: "qt-qb-summary-kw", children: "WHERE" }),
+        isCollapsed ? /* @__PURE__ */ jsxs7("span", { className: "qt-qb-summary qt-truncate", title: collapsedSummary, children: [
+          /* @__PURE__ */ jsx7("span", { className: "qt-qb-summary-kw", children: "WHERE" }),
           " ",
-          /* @__PURE__ */ jsx5("strong", { children: collapsedWhereText }),
+          /* @__PURE__ */ jsx7("strong", { children: collapsedWhereText }),
           " ",
-          /* @__PURE__ */ jsx5("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
+          /* @__PURE__ */ jsx7("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
           " ",
-          /* @__PURE__ */ jsx5("strong", { children: collapsedOrderText })
+          /* @__PURE__ */ jsx7("strong", { children: collapsedOrderText })
         ] }) : null
       ] }),
-      showUpdateButton ? /* @__PURE__ */ jsx5(
+      showUpdateButton ? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1790,7 +2692,7 @@ function QueryBuilder({
           children: `Update Query '${lastSavedQuery?.name ?? "query"}'`
         }
       ) : null,
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1801,11 +2703,11 @@ function QueryBuilder({
           children: shareCopied ? "Copied!" : "Share"
         }
       ),
-      /* @__PURE__ */ jsxs5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: () => setShowSaved(true), children: [
+      /* @__PURE__ */ jsxs7("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: () => setShowSaved(true), children: [
         "Saved",
         api.saved.items.length > 0 ? ` (${api.saved.items.length})` : ""
       ] }),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs7(
         "button",
         {
           type: "button",
@@ -1815,7 +2717,7 @@ function QueryBuilder({
           "aria-controls": bodyId,
           title: isCollapsed ? "Expand query builder" : "Collapse query builder",
           children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "span",
               {
                 className: cx3("qt-qb-collapse-caret", isCollapsed && "qt-qb-collapse-caret--collapsed"),
@@ -1823,38 +2725,38 @@ function QueryBuilder({
                 children: "\u25BE"
               }
             ),
-            /* @__PURE__ */ jsx5("span", { className: "qt-sr-only", children: isCollapsed ? "Expand query builder" : "Collapse query builder" })
+            /* @__PURE__ */ jsx7("span", { className: "qt-sr-only", children: isCollapsed ? "Expand query builder" : "Collapse query builder" })
           ]
         }
       )
     ] }),
-    !isCollapsed ? /* @__PURE__ */ jsxs5("div", { className: "qt-qb-bar qt-qb-editor-bar", children: [
-      /* @__PURE__ */ jsxs5("div", { id: bodyId, className: "qt-qb-body", children: [
-        /* @__PURE__ */ jsx5(SelectRow, { api, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(WhereRow, { api, byName, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(OrderRow, { api, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(WindowRow, { api, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(MetricsRow, { api, fields, classNames, disabled: isBusy })
+    !isCollapsed ? /* @__PURE__ */ jsxs7("div", { className: "qt-qb-bar qt-qb-editor-bar", children: [
+      /* @__PURE__ */ jsxs7("div", { id: bodyId, className: "qt-qb-body", children: [
+        /* @__PURE__ */ jsx7(SelectRow, { api, fields, classNames, disabled: isBusy }),
+        /* @__PURE__ */ jsx7(WhereRow, { api, byName, fields, classNames, disabled: isBusy }),
+        /* @__PURE__ */ jsx7(OrderRow, { api, fields, classNames, disabled: isBusy }),
+        /* @__PURE__ */ jsx7(WindowRow, { api, classNames, disabled: isBusy }),
+        /* @__PURE__ */ jsx7(MetricsRow, { api, fields, classNames, disabled: isBusy })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "qt-qb-editor-stack", children: [
-        /* @__PURE__ */ jsx5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.undo, disabled: !api.canUndo || isBusy, children: "\u21B6 Undo" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.redo, disabled: !api.canRedo || isBusy, children: "\u21B7 Redo" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.resetAll, disabled: isBusy, children: "Reset All" })
+      /* @__PURE__ */ jsxs7("div", { className: "qt-qb-editor-stack", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.undo, disabled: !api.canUndo || isBusy, children: "\u21B6 Undo" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.redo, disabled: !api.canRedo || isBusy, children: "\u21B7 Redo" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.resetAll, disabled: isBusy, children: "Reset All" })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs5("div", { className: "qt-qb-bar qt-qb-run-bar qt-qb-row", children: [
-      /* @__PURE__ */ jsx5("span", { className: "qt-qb-run-metric qt-qb-run-metric--strong", children: api.loading ? "loading\u2026" : `${rowSummary} rows` }),
-      /* @__PURE__ */ jsxs5("span", { className: "qt-qb-run-metric", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "qt-qb-bar qt-qb-run-bar qt-qb-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "qt-qb-run-metric qt-qb-run-metric--strong", children: api.loading ? "loading\u2026" : `${rowSummary} rows` }),
+      /* @__PURE__ */ jsxs7("span", { className: "qt-qb-run-metric", children: [
         "Last updated ",
         lastUpdatedText
       ] }),
-      failureText ? /* @__PURE__ */ jsx5("span", { className: "qt-qb-run-error", children: failureText }) : null,
-      /* @__PURE__ */ jsxs5("span", { className: "qt-qb-run-actions", children: [
-        autoRefreshStatus ? /* @__PURE__ */ jsx5("span", { className: "qt-qb-auto-status", children: `Every ${formatDuration2(autoRefreshStatus.frequencyMs)}; clear after ${formatDuration2(
+      failureText ? /* @__PURE__ */ jsx7("span", { className: "qt-qb-run-error", children: failureText }) : null,
+      /* @__PURE__ */ jsxs7("span", { className: "qt-qb-run-actions", children: [
+        autoRefreshStatus ? /* @__PURE__ */ jsx7("span", { className: "qt-qb-auto-status", children: `Every ${formatDuration2(autoRefreshStatus.frequencyMs)}; clear after ${formatDuration2(
           autoRefreshStatus.turnOffAfterMs
         )} (${autoRefreshStatus.pollCount} polls run)` }) : null,
-        /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs7("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1865,7 +2767,7 @@ function QueryBuilder({
               children: autoRefreshButtonText
             }
           ),
-          showAutoRefresh ? /* @__PURE__ */ jsxs5(
+          showAutoRefresh ? /* @__PURE__ */ jsxs7(
             "span",
             {
               ref: autoRefreshPopoverRef,
@@ -1873,27 +2775,27 @@ function QueryBuilder({
               role: "dialog",
               "aria-label": "Auto-refresh settings",
               children: [
-                /* @__PURE__ */ jsxs5("label", { className: "qt-auto-refresh-field", children: [
-                  /* @__PURE__ */ jsx5("span", { children: "Frequency" }),
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs7("label", { className: "qt-auto-refresh-field", children: [
+                  /* @__PURE__ */ jsx7("span", { children: "Frequency" }),
+                  /* @__PURE__ */ jsx7(
                     "select",
                     {
                       className: "qt-auto-refresh-select",
                       value: autoRefreshFrequencyMs,
                       onChange: (e) => setAutoRefreshFrequencyMs(Number(e.target.value)),
-                      children: AUTO_REFRESH_FREQUENCIES.map((option) => /* @__PURE__ */ jsx5("option", { value: option.value, children: option.label }, option.value))
+                      children: AUTO_REFRESH_FREQUENCIES.map((option) => /* @__PURE__ */ jsx7("option", { value: option.value, children: option.label }, option.value))
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("label", { className: "qt-auto-refresh-field", children: [
-                  /* @__PURE__ */ jsx5("span", { children: "Turn off after" }),
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs7("label", { className: "qt-auto-refresh-field", children: [
+                  /* @__PURE__ */ jsx7("span", { children: "Turn off after" }),
+                  /* @__PURE__ */ jsx7(
                     "select",
                     {
                       className: "qt-auto-refresh-select",
                       value: autoRefreshTurnOffAfterMs,
                       onChange: (e) => setAutoRefreshTurnOffAfterMs(Number(e.target.value)),
-                      children: AUTO_REFRESH_TURN_OFF_AFTER.map((option) => /* @__PURE__ */ jsx5(
+                      children: AUTO_REFRESH_TURN_OFF_AFTER.map((option) => /* @__PURE__ */ jsx7(
                         "option",
                         {
                           value: option.value,
@@ -1905,8 +2807,8 @@ function QueryBuilder({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx5("span", { className: cx3("qt-auto-refresh-status", !canSubmitAutoRefresh && "qt-auto-refresh-status--error"), children: canSubmitAutoRefresh ? `${selectedAutoRefreshPolls} polls maximum` : `Choose between 1 and 1000 polls` }),
-                autoRefreshStatus ? /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh-status", children: [
+                /* @__PURE__ */ jsx7("span", { className: cx3("qt-auto-refresh-status", !canSubmitAutoRefresh && "qt-auto-refresh-status--error"), children: canSubmitAutoRefresh ? `${selectedAutoRefreshPolls} polls maximum` : `Choose between 1 and 1000 polls` }),
+                autoRefreshStatus ? /* @__PURE__ */ jsxs7("span", { className: "qt-auto-refresh-status", children: [
                   "Active: every ",
                   formatDuration2(autoRefreshStatus.frequencyMs),
                   ", clears after",
@@ -1916,8 +2818,8 @@ function QueryBuilder({
                   autoRefreshStatus.pollCount,
                   " polls run."
                 ] }) : null,
-                /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh-actions", children: [
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs7("span", { className: "qt-auto-refresh-actions", children: [
+                  /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -1927,7 +2829,7 @@ function QueryBuilder({
                       children: autoRefreshStatus ? "Update" : "Start"
                     }
                   ),
-                  autoRefreshStatus ? /* @__PURE__ */ jsx5(
+                  autoRefreshStatus ? /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -1944,7 +2846,7 @@ function QueryBuilder({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1956,7 +2858,7 @@ function QueryBuilder({
         )
       ] })
     ] }),
-    !isCollapsed && showSaved ? /* @__PURE__ */ jsx5(SavedQueriesModal, { saved: api.saved, onClose: () => setShowSaved(false), onLoad: setLastSavedId }) : null
+    !isCollapsed && showSaved ? /* @__PURE__ */ jsx7(SavedQueriesModal, { saved: api.saved, onClose: () => setShowSaved(false), onLoad: setLastSavedId }) : null
   ] });
 }
 function MoveButtons({
@@ -1967,8 +2869,8 @@ function MoveButtons({
   onMove
 }) {
   if (count < 2) return null;
-  return /* @__PURE__ */ jsxs5("span", { className: "qt-chip-move-buttons", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-chip-move-buttons", children: [
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1980,7 +2882,7 @@ function MoveButtons({
         children: "\u2190"
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2001,19 +2903,22 @@ function SelectRow({
   disabled
 }) {
   const { select, columnDrag } = api;
-  const [adding, setAdding] = useState4(false);
-  const fieldLabelByName = useMemo3(() => new Map(select.fields.map((f) => [f.name, f.label])), [select.fields]);
+  const [editingColumns, setEditingColumns] = useState6(false);
+  const [adding, setAdding] = useState6(false);
+  const fieldLabelByName = useMemo4(() => new Map(select.fields.map((f) => [f.name, f.label])), [select.fields]);
   function reorderByIndex(from, overIndex) {
     select.move(from, overIndex);
   }
   const fieldNames = select.visible.map((c) => c.field);
   const dragSource = columnDrag.source;
   const rendered = columnDrag.preview(fieldNames);
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "select" }),
+  return /* @__PURE__ */ jsxs7("div", { className: "qt-qb-row", children: [
+    /* @__PURE__ */ jsx7("span", { className: "qt-qb-kw", children: "select" }),
+    /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-btn", disabled, onClick: () => setEditingColumns(true), children: "Edit columns" }),
+    editingColumns && /* @__PURE__ */ jsx7(SelectColumnEditor, { api, onClose: () => setEditingColumns(false) }),
     rendered.map((name, position) => {
       const label = fieldLabelByName.get(name) ?? name;
-      return /* @__PURE__ */ jsxs5(
+      return /* @__PURE__ */ jsxs7(
         "span",
         {
           className: cx3(
@@ -2052,9 +2957,9 @@ function SelectRow({
           onDragEnd: () => columnDrag.end(),
           title: "drag to reorder",
           children: [
-            /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-            /* @__PURE__ */ jsx5("span", { className: "qt-chip-field", children: label }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
+            /* @__PURE__ */ jsx7("span", { className: "qt-chip-field", children: label }),
+            /* @__PURE__ */ jsx7(
               MoveButtons,
               {
                 label,
@@ -2064,23 +2969,23 @@ function SelectRow({
                 onMove: (nextPosition) => select.move(name, nextPosition)
               }
             ),
-            /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => select.hide(name), disabled, children: "\u2715" })
+            /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-chip-x", onClick: () => select.hide(name), disabled, children: "\u2715" })
           ]
         },
         name
       );
     }),
-    adding ? /* @__PURE__ */ jsx5(
+    adding ? /* @__PURE__ */ jsx7(
       FieldPicker,
       {
-        fields: select.hidden.filter(isSelectable),
+        fields: select.hidden.filter(isSelectable2),
         onPick: (f) => {
           select.show(f.name);
           setAdding(false);
         },
         onClose: () => setAdding(false)
       }
-    ) : /* @__PURE__ */ jsx5(
+    ) : /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2090,9 +2995,16 @@ function SelectRow({
         children: "+ add column"
       }
     ),
-    api.query.select.length > 0 && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: select.reset, disabled, title: "Reset to default columns", children: "reset" })
+    api.query.select.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-link-btn", onClick: select.reset, disabled, title: "Reset to default columns", children: "reset" })
   ] });
 }
+function dropModeFor(e) {
+  const rect = e.currentTarget.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  if (x < rect.width * 0.3) return "before";
+  if (x > rect.width * 0.7) return "after";
+  return "merge";
+}
 function WhereRow({
   api,
   byName,
@@ -2100,148 +3012,319 @@ function WhereRow({
   classNames,
   disabled
 }) {
-  const [adding, setAdding] = useState4(false);
+  const [adding, setAdding] = useState6(false);
+  const [drag, setDrag] = useState6(null);
+  const where = api.query.where;
+  const hasOr = where.some(isOrGroup);
   function addClause(f) {
-    const op = opsForField2(f)[0] ?? "=";
+    const op = positiveOpsForField(f)[0] ?? opsForField2(f)[0] ?? "=";
     api.addFilter({ field: f.name, op, value: "" });
     setAdding(false);
   }
-  const groupedWhere = useMemo3(() => {
-    const groups = /* @__PURE__ */ new Map();
-    const order = [];
-    api.query.where.forEach((c, i) => {
-      if (!groups.has(c.field)) order.push(c.field);
-      const group = groups.get(c.field) ?? { field: c.field, clauses: [] };
-      group.clauses.push({ clause: c, index: i });
-      groups.set(c.field, group);
-    });
-    return order.map((fieldName) => groups.get(fieldName));
-  }, [api.query.where]);
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "where" }),
-    api.query.where.length === 0 && !adding && /* @__PURE__ */ jsx5("span", { className: "qt-qb-hint", children: "all rows" }),
-    groupedWhere.map((g) => /* @__PURE__ */ jsx5(
-      ClauseChip,
-      {
-        api,
-        field: byName.get(g.field),
-        clauses: g.clauses,
-        classNames,
-        disabled,
-        onChange: (index, next) => api.updateFilter(index, next),
-        onRemove: (index) => api.removeFilter(index)
-      },
-      g.field
-    )),
-    adding ? /* @__PURE__ */ jsx5(
+  function handleOver(e, index) {
+    if (!drag) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const mode = dropModeFor(e);
+    setDrag((d) => d && (d.over?.index !== index || d.over?.mode !== mode) ? { from: d.from, over: { index, mode } } : d);
+  }
+  function handleDrop() {
+    if (!drag || !drag.over) {
+      setDrag(null);
+      return;
+    }
+    const { from } = drag;
+    const { index: target, mode } = drag.over;
+    if (mode === "merge") {
+      if (target !== from) api.mergeFilters(from, target);
+    } else {
+      const tPrime = target < from ? target : target - 1;
+      const insertAt = mode === "after" ? tPrime + 1 : tPrime;
+      if (insertAt !== from) api.reorderFilters(from, insertAt);
+    }
+    setDrag(null);
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: "qt-qb-row", children: [
+    /* @__PURE__ */ jsx7("span", { className: "qt-qb-kw", children: "where" }),
+    where.length === 0 && !adding && /* @__PURE__ */ jsx7("span", { className: "qt-qb-hint", children: "all rows" }),
+    where.map((term, index) => /* @__PURE__ */ jsxs7("span", { className: "qt-where-term-wrap", children: [
+      index > 0 && hasOr && /* @__PURE__ */ jsx7("span", { className: "qt-where-and", children: "AND" }),
+      /* @__PURE__ */ jsx7(
+        TermChip,
+        {
+          api,
+          term,
+          index,
+          byName,
+          classNames,
+          disabled,
+          isDragSource: drag?.from === index,
+          dropHint: drag?.over?.index === index ? drag.over.mode : null,
+          onDragStart: () => setDrag({ from: index, over: null }),
+          onDragOver: (e) => handleOver(e, index),
+          onDrop: handleDrop,
+          onDragEnd: () => setDrag(null)
+        }
+      )
+    ] }, index)),
+    adding ? /* @__PURE__ */ jsx7(
       FieldPicker,
       {
-        fields: fields.filter(isFilterable),
+        fields: fields.filter(isFilterable2),
         gateOnDistinct: true,
         onPick: addClause,
         onClose: () => setAdding(false)
       }
-    ) : /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add filter" }),
-    api.query.where.length > 0 && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: api.clearFilters, disabled, title: "Reset filters", children: "reset" })
+    ) : /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add filter" }),
+    where.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-link-btn", onClick: api.clearFilters, disabled, title: "Reset filters", children: "reset" })
   ] });
 }
-function ClauseChip({
+function TermChip({
   api,
-  field,
-  clauses,
+  term,
+  index,
+  byName,
   classNames,
   disabled,
-  onChange,
-  onRemove
+  isDragSource,
+  dropHint,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
 }) {
-  const labelField = field?.label;
-  const fieldName = clauses[0]?.clause.field;
-  const fieldHasNull = useFieldHasNull(api, field?.name);
-  return /* @__PURE__ */ jsxs5("span", { className: cx3("qt-chip", "qt-chip--where", classNames?.chip), children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-chip-field", children: labelField ?? fieldName }),
-    /* @__PURE__ */ jsx5("span", { className: "qt-chip-where-list", children: clauses.map((entry, idx) => {
-      const clause = entry.clause;
-      const baseOps = field ? opsForField2(field) : [clause.op];
-      const filteredBaseOps = fieldHasNull === false ? baseOps.filter((op) => !NULLARY_OPS2.has(op)) : baseOps;
-      const clauseOps = filteredBaseOps.includes(clause.op) ? filteredBaseOps : [...filteredBaseOps, clause.op];
-      const needsValue = !NULLARY_OPS2.has(clause.op);
-      return /* @__PURE__ */ jsxs5("span", { className: "qt-chip-where-clause", children: [
-        idx > 0 && /* @__PURE__ */ jsx5("span", { className: "qt-chip-and", children: "and" }),
-        /* @__PURE__ */ jsx5(
-          "select",
+  const group = isOrGroup(term);
+  const predicates = predicatesOf(term);
+  const grip = /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: "qt-chip-grip",
+      "aria-hidden": true,
+      draggable: !disabled,
+      onDragStart: (e) => {
+        onDragStart();
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", String(index));
+      },
+      onDragEnd,
+      title: "drag to reorder, or drop onto another filter to make an OR",
+      children: "\u22EE\u22EE"
+    }
+  );
+  return /* @__PURE__ */ jsxs7(
+    "span",
+    {
+      className: cx3(
+        "qt-chip",
+        "qt-chip--where",
+        group && "qt-chip--or",
+        isDragSource && "qt-chip--dragging",
+        dropHint ? `qt-chip--drop-${dropHint}` : void 0,
+        classNames?.chip
+      ),
+      onDragOver,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop();
+      },
+      children: [
+        grip,
+        group ? /* @__PURE__ */ jsx7("span", { className: "qt-or-group", children: predicates.map((clause, predIndex) => /* @__PURE__ */ jsxs7("span", { className: "qt-or-member", children: [
+          predIndex > 0 && /* @__PURE__ */ jsx7("span", { className: "qt-chip-and qt-chip-or", children: "OR" }),
+          /* @__PURE__ */ jsx7(
+            PredicateEditor,
+            {
+              api,
+              field: byName.get(clause.field),
+              clause,
+              classNames,
+              disabled,
+              onChange: (next) => api.updatePredicate(index, predIndex, next),
+              onRemove: () => api.removePredicate(index, predIndex)
+            }
+          )
+        ] }, predIndex)) }) : /* @__PURE__ */ jsx7(
+          PredicateEditor,
           {
-            className: cx3("qt-chip-op", classNames?.select),
-            value: clause.op,
+            api,
+            field: byName.get(term.field),
+            clause: term,
+            classNames,
             disabled,
-            style: { width: `${chipFieldWidthForSelect(clause.op, 3)}ch` },
-            onChange: (e) => onChange(entry.index, { ...clause, op: e.target.value }),
-            children: clauseOps.map((op) => /* @__PURE__ */ jsx5("option", { value: op, children: op }, op))
+            onChange: (next) => api.updatePredicate(index, 0, next),
+            onRemove: () => api.removeFilter(index)
           }
-        ),
-        needsValue && /* @__PURE__ */ jsx5(
-          ValueInput,
+        )
+      ]
+    }
+  );
+}
+var OP_LABEL = {
+  "=": "=",
+  "!=": "\u2260",
+  ">": ">",
+  ">=": "\u2265",
+  "<": "<",
+  "<=": "\u2264",
+  contains: "contains",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  matches_regex: "matches",
+  not_matches_regex: "not matches",
+  includes: "includes",
+  is_null: "is null",
+  is_not_null: "is not null"
+};
+function choiceLabel(op, negated) {
+  return negated ? `not ${OP_LABEL[op]}` : OP_LABEL[op];
+}
+function OpPicker({
+  field,
+  clause,
+  disabled,
+  classNames,
+  onPick
+}) {
+  const [open, setOpen] = useState6(false);
+  const wrapRef = useRef3(null);
+  useEffect5(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    const t = setTimeout(() => window.addEventListener("click", onDocClick), 0);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      clearTimeout(t);
+      window.removeEventListener("click", onDocClick);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const pairs = useMemo4(() => field ? opPairsForField2(field) : [], [field]);
+  const isActive = (choice) => choice.op === clause.op && Boolean(choice.negated) === Boolean(clause.negated);
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-op-picker", ref: wrapRef, children: [
+    /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        className: cx3("qt-chip-op-btn", "qt-op-trigger", classNames?.select),
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          choiceLabel(clause.op, Boolean(clause.negated)),
+          /* @__PURE__ */ jsx7("span", { className: "qt-op-caret", "aria-hidden": true, children: "\u25BE" })
+        ]
+      }
+    ),
+    open && pairs.length > 0 && /* @__PURE__ */ jsxs7("span", { className: "qt-op-pop", role: "dialog", "aria-label": "Choose condition", children: [
+      /* @__PURE__ */ jsx7("span", { className: "qt-cm-col-head", children: "keep" }),
+      /* @__PURE__ */ jsx7("span", { className: "qt-cm-col-head qt-cm-col-head--neg", children: "exclude" }),
+      pairs.map((pair, i) => /* @__PURE__ */ jsxs7(Fragment6, { children: [
+        /* @__PURE__ */ jsx7(
+          "button",
           {
-            api,
-            field,
-            value: clause.value,
-            classNames,
-            onChange: (v) => onChange(entry.index, { ...clause, value: v })
+            type: "button",
+            className: cx3("qt-op-cell", isActive(pair.keep) && "qt-op-cell--on"),
+            onClick: () => {
+              onPick(pair.keep);
+              setOpen(false);
+            },
+            children: choiceLabel(pair.keep.op, pair.keep.negated)
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
-            className: "qt-chip-x",
-            onClick: () => onRemove(entry.index),
-            disabled,
-            children: "\u2715"
+            className: cx3("qt-op-cell", "qt-op-cell--neg", isActive(pair.exclude) && "qt-op-cell--on"),
+            onClick: () => {
+              onPick(pair.exclude);
+              setOpen(false);
+            },
+            children: choiceLabel(pair.exclude.op, pair.exclude.negated)
           }
         )
-      ] }, entry.index);
-    }) })
+      ] }, i))
+    ] })
+  ] });
+}
+function PredicateEditor({
+  api,
+  field,
+  clause,
+  classNames,
+  disabled,
+  onChange,
+  onRemove
+}) {
+  const needsValue = !NULLARY_OPS2.has(clause.op);
+  const isRegex = clause.op === "matches_regex" || clause.op === "not_matches_regex";
+  function pickOp(choice) {
+    const next = { field: clause.field, op: choice.op, value: clause.value };
+    if (choice.negated) next.negated = true;
+    onChange(next);
+  }
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-pred", children: [
+    /* @__PURE__ */ jsx7("span", { className: "qt-chip-field", children: field?.label ?? clause.field }),
+    /* @__PURE__ */ jsx7(OpPicker, { field, clause, disabled, classNames, onPick: pickOp }),
+    needsValue && /* @__PURE__ */ jsx7(
+      ValueInput,
+      {
+        api,
+        field,
+        value: clause.value,
+        forceFreeform: isRegex,
+        placeholder: isRegex ? "regex" : "value",
+        classNames,
+        onChange: (v) => onChange({ ...clause, value: v })
+      }
+    ),
+    /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, children: "\u2715" })
   ] });
 }
 function ValueInput({
   api,
   field,
   value,
+  forceFreeform,
+  placeholder = "value",
   classNames,
   onChange
 }) {
+  const presentation = useFilterValuePresentation();
   const strategy = field ? filterValuesFor(field) : { source: "freeform" };
-  if (strategy.source === "static") {
-    const selectedText = value || "\u2014";
-    const widthChars = chipFieldWidthForSelect(selectedText, 4);
-    return /* @__PURE__ */ jsxs5(
-      "select",
-      {
-        className: cx3("qt-chip-val", classNames?.select),
-        value,
-        style: { width: `${widthChars}ch` },
-        onChange: (e) => onChange(e.target.value),
-        children: [
-          /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }),
-          strategy.options.map((o) => /* @__PURE__ */ jsx5("option", { value: o, children: o }, o))
-        ]
-      }
-    );
+  if (!forceFreeform && strategy.source === "static") {
+    if (presentation.render || presentation.label || strategy.options.some((o) => typeof o !== "string")) {
+      return /* @__PURE__ */ jsx7(PresentedValueInput, { field: field?.name ?? "", value, options: strategy.options, onChange });
+    }
+    return /* @__PURE__ */ jsxs7("select", { className: cx3("qt-chip-val", classNames?.select), value, onChange: (e) => onChange(e.target.value), children: [
+      /* @__PURE__ */ jsx7("option", { value: "", children: "\u2014" }),
+      strategy.options.map((o) => {
+        const option = typeof o === "string" ? { value: o, label: o } : o;
+        return /* @__PURE__ */ jsx7("option", { value: option.value, children: option.label }, option.value);
+      })
+    ] });
   }
-  if (strategy.source === "freeform" || !field) {
-    const widthChars = chipFieldWidthForInput(value || "value", field?.type, 5, 4);
-    return /* @__PURE__ */ jsx5(
+  if (forceFreeform || strategy.source === "freeform" || !field) {
+    const widthChars = chipFieldWidthForInput(value || placeholder, field?.type, 5, 4);
+    return /* @__PURE__ */ jsx7(
       "input",
       {
         className: cx3("qt-chip-val", classNames?.input),
         value,
-        placeholder: "value",
+        placeholder,
         size: widthChars,
         style: { width: `${widthChars}ch` },
         onChange: (e) => onChange(e.target.value)
       }
     );
   }
-  return /* @__PURE__ */ jsx5(AutocompleteInput, { api, field, value, classNames, onChange });
+  return /* @__PURE__ */ jsx7(AutocompleteInput, { api, field, value, classNames, onChange });
 }
 function AutocompleteInput({
   api,
@@ -2250,9 +3333,9 @@ function AutocompleteInput({
   classNames,
   onChange
 }) {
-  const [result, setResult] = useState4({ values: [], hasMore: false });
-  const listId = useId();
-  useEffect4(() => {
+  const [result, setResult] = useState6({ values: [], hasMore: false });
+  const listId = useId2();
+  useEffect5(() => {
     let cancelled = false;
     const t = setTimeout(() => {
       void api.filterValues(field.name, value).then((r) => {
@@ -2266,8 +3349,8 @@ function AutocompleteInput({
       clearTimeout(t);
     };
   }, [api, field.name, value]);
-  return /* @__PURE__ */ jsxs5("span", { className: "qt-autocomplete", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-autocomplete", children: [
+    /* @__PURE__ */ jsx7(
       "input",
       {
         className: cx3("qt-chip-val", classNames?.input),
@@ -2279,8 +3362,8 @@ function AutocompleteInput({
         onChange: (e) => onChange(e.target.value)
       }
     ),
-    /* @__PURE__ */ jsx5("datalist", { id: listId, children: result.values.map((v) => /* @__PURE__ */ jsx5("option", { value: v }, v)) }),
-    result.hasMore && /* @__PURE__ */ jsx5("span", { className: "qt-autocomplete-hint", children: "keep typing to refine\u2026" })
+    /* @__PURE__ */ jsx7("datalist", { id: listId, children: result.values.map((v) => /* @__PURE__ */ jsx7("option", { value: v }, v)) }),
+    result.hasMore && /* @__PURE__ */ jsx7("span", { className: "qt-autocomplete-hint", children: "keep typing to refine\u2026" })
   ] });
 }
 function OrderTermChip({
@@ -2297,6 +3380,7 @@ function OrderTermChip({
   onDragEnd,
   disabled,
   updateTerm,
+  clearExtract,
   removeTerm,
   position,
   count,
@@ -2305,7 +3389,7 @@ function OrderTermChip({
   label
 }) {
   const fieldHasNull = useFieldHasNull(api, field?.name);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: cx3("qt-chip", "qt-chip--col", "qt-chip--sort", isDragSource && "qt-chip--dragging", classNames?.chip),
@@ -2323,10 +3407,10 @@ function OrderTermChip({
       onDragEnd,
       title: "drag to reorder sort priority",
       children: [
-        /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-        showPriority && /* @__PURE__ */ jsx5("span", { className: "qt-chip-priority", children: priority }),
-        /* @__PURE__ */ jsx5("span", { className: "qt-chip-field", children: label }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
+        showPriority && /* @__PURE__ */ jsx7("span", { className: "qt-chip-priority", children: priority }),
+        /* @__PURE__ */ jsx7("span", { className: "qt-chip-field", children: label }),
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2336,7 +3420,45 @@ function OrderTermChip({
             children: term.dir === "asc" ? "\u2191 asc" : "\u2193 desc"
           }
         ),
-        fieldHasNull !== false && /* @__PURE__ */ jsxs5(
+        term.extract ? /* @__PURE__ */ jsxs7("span", { className: "qt-sort-extract", children: [
+          /* @__PURE__ */ jsx7("span", { className: "qt-chip-and", children: "extract" }),
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              className: cx3("qt-chip-val", classNames?.input),
+              value: term.extract.regex,
+              placeholder: "regex",
+              "aria-label": `Regex extract for ${label}`,
+              size: chipFieldWidthForInput(term.extract.regex || "regex", "text", 5, 4),
+              style: { width: `${chipFieldWidthForInput(term.extract.regex || "regex", "text", 5, 4)}ch` },
+              disabled,
+              onChange: (e) => updateTerm(dataIndex, { extract: { regex: e.target.value } })
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "qt-chip-x",
+              title: "Remove regex extraction",
+              "aria-label": `Remove regex extract for ${label}`,
+              disabled,
+              onClick: () => clearExtract(dataIndex),
+              children: "\u2715"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "qt-chip-op-btn",
+            title: "Sort by text extracted with a regular expression",
+            disabled,
+            onClick: () => updateTerm(dataIndex, { extract: { regex: "" } }),
+            children: "+ regex extract"
+          }
+        ),
+        (term.extract != null || fieldHasNull !== false) && /* @__PURE__ */ jsxs7(
           "button",
           {
             type: "button",
@@ -2350,7 +3472,7 @@ function OrderTermChip({
             ]
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           MoveButtons,
           {
             label,
@@ -2360,7 +3482,7 @@ function OrderTermChip({
             onMove: moveTerm
           }
         ),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => removeTerm(dataIndex), disabled, children: "\u2715" })
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-chip-x", onClick: () => removeTerm(dataIndex), disabled, children: "\u2715" })
       ]
     }
   );
@@ -2372,15 +3494,24 @@ function OrderRow({
   disabled
 }) {
   const orderBy = api.query.orderBy;
-  const byName = useMemo3(() => new Map(fields.map((f) => [f.name, f])), [fields]);
-  const [drag, setDrag] = useState4(null);
-  const [adding, setAdding] = useState4(false);
+  const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const [drag, setDrag] = useState6(null);
+  const [adding, setAdding] = useState6(false);
   function setOrderBy(next) {
     api.setSort(next);
   }
   function updateTerm(i, patch) {
     setOrderBy(orderBy.map((o, k) => k === i ? { ...o, ...patch } : o));
   }
+  function clearExtract(i) {
+    setOrderBy(
+      orderBy.map((term, index) => {
+        if (index !== i) return term;
+        const { extract: _extract, ...plainTerm } = term;
+        return plainTerm;
+      })
+    );
+  }
   function removeTerm(i) {
     setOrderBy(orderBy.filter((_, k) => k !== i));
   }
@@ -2406,7 +3537,7 @@ function OrderRow({
     setAdding(false);
   }
   const termFields = orderBy.map((o) => o.field);
-  const termByField = useMemo3(() => new Map(orderBy.map((o) => [o.field, o])), [orderBy]);
+  const termByField = useMemo4(() => new Map(orderBy.map((o) => [o.field, o])), [orderBy]);
   function previewFields() {
     if (!drag) return termFields;
     const without = termFields.filter((f) => f !== drag.source);
@@ -2436,14 +3567,14 @@ function OrderRow({
   const sortable = fields.filter(isSortable2);
   const isDefaultOrderBy = orderBy.length === api.defaults.orderBy.length && orderBy.every((term, i) => {
     const next = api.defaults.orderBy[i];
-    return term.field === next?.field && term.dir === next?.dir && (term.nulls ?? "last") === (next?.nulls ?? "last");
+    return term.field === next?.field && term.dir === next?.dir && (term.nulls ?? "last") === (next?.nulls ?? "last") && (term.extract?.regex ?? null) === (next?.extract?.regex ?? null);
   });
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "order by" }),
-    orderBy.length === 0 && !adding && /* @__PURE__ */ jsx5("span", { className: "qt-qb-hint", children: "(default)" }),
+  return /* @__PURE__ */ jsxs7("div", { className: "qt-qb-row", children: [
+    /* @__PURE__ */ jsx7("span", { className: "qt-qb-kw", children: "order by" }),
+    orderBy.length === 0 && !adding && /* @__PURE__ */ jsx7("span", { className: "qt-qb-hint", children: "(default)" }),
     rendered.map((f, pos) => {
       const term = termByField.get(f);
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx7(
         OrderTermChip,
         {
           api,
@@ -2459,6 +3590,7 @@ function OrderRow({
           onDragEnd: () => setDrag(null),
           disabled,
           updateTerm,
+          clearExtract,
           removeTerm,
           position: pos,
           count: rendered.length,
@@ -2476,8 +3608,8 @@ function OrderRow({
         f
       );
     }),
-    adding ? /* @__PURE__ */ jsx5(FieldPicker, { fields: sortable, onPick: addTerm, onClose: () => setAdding(false) }) : /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add sort" }),
-    !isDefaultOrderBy && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: () => api.setSort(api.defaults.orderBy), disabled, children: "reset" })
+    adding ? /* @__PURE__ */ jsx7(FieldPicker, { fields: sortable, onPick: addTerm, onClose: () => setAdding(false) }) : /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add sort" }),
+    !isDefaultOrderBy && /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-link-btn", onClick: () => api.setSort(api.defaults.orderBy), disabled, children: "reset" })
   ] });
 }
 function WindowRow({
@@ -2486,10 +3618,10 @@ function WindowRow({
   disabled
 }) {
   const { query } = api;
-  const [limitDraft, setLimitDraft] = useState4(String(query.limit));
-  const [offsetDraft, setOffsetDraft] = useState4(String(query.offset));
-  useEffect4(() => setLimitDraft(String(query.limit)), [query.limit]);
-  useEffect4(() => setOffsetDraft(String(query.offset)), [query.offset]);
+  const [limitDraft, setLimitDraft] = useState6(String(query.limit));
+  const [offsetDraft, setOffsetDraft] = useState6(String(query.offset));
+  useEffect5(() => setLimitDraft(String(query.limit)), [query.limit]);
+  useEffect5(() => setOffsetDraft(String(query.offset)), [query.offset]);
   const hasLimitDefault = query.limit === api.defaults.limit;
   const hasOffsetDefault = query.offset === api.defaults.offset;
   const hasWindowDefault = hasLimitDefault && hasOffsetDefault;
@@ -2499,10 +3631,10 @@ function WindowRow({
   function commitOffset() {
     api.setOffset(Math.max(0, Number(offsetDraft) || 0));
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row qt-qb-pagination", children: [
-    /* @__PURE__ */ jsxs5("label", { className: "qt-qb-window-field", children: [
-      /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "limit" }),
-      /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs7("div", { className: "qt-qb-row qt-qb-pagination", children: [
+    /* @__PURE__ */ jsxs7("label", { className: "qt-qb-window-field", children: [
+      /* @__PURE__ */ jsx7("span", { className: "qt-qb-kw", children: "limit" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           className: cx3("qt-qb-num", classNames?.input),
@@ -2516,9 +3648,9 @@ function WindowRow({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5("label", { className: "qt-qb-window-field", children: [
-      /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "offset" }),
-      /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsxs7("label", { className: "qt-qb-window-field", children: [
+      /* @__PURE__ */ jsx7("span", { className: "qt-qb-kw", children: "offset" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           className: cx3("qt-qb-num", classNames?.input),
@@ -2532,7 +3664,7 @@ function WindowRow({
         }
       )
     ] }),
-    !hasWindowDefault && /* @__PURE__ */ jsx5(
+    !hasWindowDefault && /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2565,11 +3697,11 @@ function MetricsRow({
 }) {
   const { aggregations } = api;
   const clauses = aggregations.clauses;
-  const measurable = useMemo3(() => fields.filter(isMeasurable), [fields]);
-  const groupable = useMemo3(() => fields.filter(isGroupable), [fields]);
-  const [drag, setDrag] = useState4(null);
+  const measurable = useMemo4(() => fields.filter(isMeasurable), [fields]);
+  const groupable = useMemo4(() => fields.filter(isGroupable), [fields]);
+  const [drag, setDrag] = useState6(null);
   const ids = clauses.map((c) => c.id);
-  const byId = useMemo3(() => new Map(clauses.map((c) => [c.id, c])), [clauses]);
+  const byId = useMemo4(() => new Map(clauses.map((c) => [c.id, c])), [clauses]);
   function previewIds() {
     if (!drag) return ids;
     const without = ids.filter((i) => i !== drag.source);
@@ -2595,12 +3727,12 @@ function MetricsRow({
     setDrag(null);
   }
   const rendered = previewIds();
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row qt-qb-row--metrics", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "metrics" }),
-    clauses.length === 0 && /* @__PURE__ */ jsx5("span", { className: "qt-qb-hint", children: "none" }),
+  return /* @__PURE__ */ jsxs7("div", { className: "qt-qb-row qt-qb-row--metrics", children: [
+    /* @__PURE__ */ jsx7("span", { className: "qt-qb-kw", children: "metrics" }),
+    clauses.length === 0 && /* @__PURE__ */ jsx7("span", { className: "qt-qb-hint", children: "none" }),
     rendered.map((id, position) => {
       const clause = byId.get(id);
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx7(
         MetricChip,
         {
           clause,
@@ -2625,8 +3757,8 @@ function MetricsRow({
         id
       );
     }),
-    /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-add", onClick: () => aggregations.add(), disabled, children: "+ add metric" }),
-    clauses.length > 0 && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: aggregations.clear, disabled, title: "Remove all metrics", children: "reset" })
+    /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-add", onClick: () => aggregations.add(), disabled, children: "+ add metric" }),
+    clauses.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-link-btn", onClick: aggregations.clear, disabled, title: "Remove all metrics", children: "reset" })
   ] });
 }
 function changeMetricOp(aggregations, clause, measurable, op) {
@@ -2655,11 +3787,11 @@ function MetricChip({
   count,
   onMove
 }) {
-  const [addingGroup, setAddingGroup] = useState4(false);
-  const byName = useMemo3(() => new Map(groupable.map((f) => [f.name, f])), [groupable]);
+  const [addingGroup, setAddingGroup] = useState6(false);
+  const byName = useMemo4(() => new Map(groupable.map((f) => [f.name, f])), [groupable]);
   const needsField = aggOpNeedsField(clause.op);
   const measureOptions = measurable.filter((f) => aggOpsForField(f).includes(clause.op));
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: cx3("qt-chip", "qt-chip--agg", isDragSource && "qt-chip--dragging", classNames?.chip),
@@ -2677,18 +3809,18 @@ function MetricChip({
       onDragEnd,
       title: "drag to reorder metrics",
       children: [
-        /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
+        /* @__PURE__ */ jsx7(
           "select",
           {
             className: cx3("qt-chip-op", classNames?.select),
             value: clause.op,
             disabled,
             onChange: (e) => onChangeOp(e.target.value),
-            children: AGG_OPS.map((op) => /* @__PURE__ */ jsx5("option", { value: op, children: AGG_OP_LABELS[op] }, op))
+            children: AGG_OPS.map((op) => /* @__PURE__ */ jsx7("option", { value: op, children: AGG_OP_LABELS[op] }, op))
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs7(
           "select",
           {
             className: cx3("qt-chip-val", classNames?.select),
@@ -2696,18 +3828,18 @@ function MetricChip({
             disabled,
             onChange: (e) => onChangeField(e.target.value || void 0),
             children: [
-              !needsField && /* @__PURE__ */ jsx5("option", { value: "", children: "(all rows)" }),
-              needsField && clause.field == null && /* @__PURE__ */ jsx5("option", { value: "", children: "measure\u2026" }),
-              measureOptions.map((f) => /* @__PURE__ */ jsx5("option", { value: f.name, children: f.label }, f.name))
+              !needsField && /* @__PURE__ */ jsx7("option", { value: "", children: "(all rows)" }),
+              needsField && clause.field == null && /* @__PURE__ */ jsx7("option", { value: "", children: "measure\u2026" }),
+              measureOptions.map((f) => /* @__PURE__ */ jsx7("option", { value: f.name, children: f.label }, f.name))
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "qt-chip-agg-by", children: [
-          clause.groupBy.map((g) => /* @__PURE__ */ jsxs5("span", { className: "qt-chip-agg-group", children: [
-            /* @__PURE__ */ jsx5("span", { className: "qt-chip-agg-group-label", children: byName.get(g)?.label ?? g }),
-            /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => onRemoveGroup(g), disabled, children: "\u2715" })
+        /* @__PURE__ */ jsxs7("span", { className: "qt-chip-agg-by", children: [
+          clause.groupBy.map((g) => /* @__PURE__ */ jsxs7("span", { className: "qt-chip-agg-group", children: [
+            /* @__PURE__ */ jsx7("span", { className: "qt-chip-agg-group-label", children: byName.get(g)?.label ?? g }),
+            /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-chip-x", onClick: () => onRemoveGroup(g), disabled, children: "\u2715" })
           ] }, g)),
-          addingGroup ? /* @__PURE__ */ jsx5(
+          addingGroup ? /* @__PURE__ */ jsx7(
             FieldPicker,
             {
               fields: groupable,
@@ -2718,7 +3850,7 @@ function MetricChip({
               },
               onClose: () => setAddingGroup(false)
             }
-          ) : /* @__PURE__ */ jsx5(
+          ) : /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2730,7 +3862,7 @@ function MetricChip({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           MoveButtons,
           {
             label: clause.label ?? `${AGG_OP_LABELS[clause.op]} metric`,
@@ -2740,16 +3872,16 @@ function MetricChip({
             onMove
           }
         ),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, title: "Remove metric", children: "\u2715" })
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, title: "Remove metric", children: "\u2715" })
       ]
     }
   );
 }
 
 // src/MetricsPanel.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { EMPTY_QUERY } from "@pythia-software/query-table-core";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var cx4 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
 var OP_LABELS = {
   count: "Count",
@@ -2767,18 +3899,18 @@ function MetricsPanel({
   emptyMessage,
   classNames
 }) {
-  const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const byName = useMemo5(() => new Map(fields.map((f) => [f.name, f])), [fields]);
   const { clauses, results, loading, error } = aggregations;
   if (clauses.length === 0) {
-    return emptyMessage ? /* @__PURE__ */ jsx6("div", { className: cx4("qt-metrics", classNames?.root), children: emptyMessage }) : null;
+    return emptyMessage ? /* @__PURE__ */ jsx8("div", { className: cx4("qt-metrics", classNames?.root), children: emptyMessage }) : null;
   }
   const resultById = new Map((results?.metrics ?? []).map((m) => [m.id, m.buckets]));
-  return /* @__PURE__ */ jsxs6("div", { className: cx4("qt-metrics", classNames?.root), children: [
-    error ? /* @__PURE__ */ jsxs6("div", { className: "qt-metrics-error", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cx4("qt-metrics", classNames?.root), children: [
+    error ? /* @__PURE__ */ jsxs8("div", { className: "qt-metrics-error", children: [
       "Metrics failed: ",
       error.message
     ] }) : null,
-    clauses.map((clause) => /* @__PURE__ */ jsx6(
+    clauses.map((clause) => /* @__PURE__ */ jsx8(
       MetricCard,
       {
         clause,
@@ -2802,23 +3934,23 @@ function MetricCard({
 }) {
   const measure = clause.field ? byName.get(clause.field) : void 0;
   const groupLabels = clause.groupBy.map((g) => byName.get(g)?.label ?? g);
-  const decimals = useMemo4(() => cardDecimals(buckets), [buckets]);
+  const decimals = useMemo5(() => cardDecimals(buckets), [buckets]);
   const fmt = (v) => formatMetricValue(v, clause.op, measure, renderers, decimals);
-  return /* @__PURE__ */ jsxs6("div", { className: cx4("qt-metric", `qt-metric--gb${Math.min(clause.groupBy.length, 3)}`, className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "qt-metric-head", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-title", children: metricTitle(clause, measure) }),
-      groupLabels.length > 0 && /* @__PURE__ */ jsxs6("span", { className: "qt-metric-by", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cx4("qt-metric", `qt-metric--gb${Math.min(clause.groupBy.length, 3)}`, className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "qt-metric-head", children: [
+      /* @__PURE__ */ jsx8("span", { className: "qt-metric-title", children: metricTitle(clause, measure) }),
+      groupLabels.length > 0 && /* @__PURE__ */ jsxs8("span", { className: "qt-metric-by", children: [
         "by ",
         groupLabels.join(" \xD7 ")
       ] })
     ] }),
-    loading && buckets.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "qt-metric-loading", children: "\u2026" }) : buckets.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "qt-metric-empty", children: "no data" }) : clause.groupBy.length === 0 ? /* @__PURE__ */ jsx6(BigNumber, { bucket: buckets[0], fmt }) : clause.groupBy.length === 1 ? /* @__PURE__ */ jsx6(BarList, { buckets, fmt }) : clause.groupBy.length === 2 ? /* @__PURE__ */ jsx6(Pivot, { buckets, fmt, rowLabel: groupLabels[0], colLabel: groupLabels[1] }) : /* @__PURE__ */ jsx6(FlatTable, { buckets, fmt, groupLabels, valueLabel: metricTitle(clause, measure) })
+    loading && buckets.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "qt-metric-loading", children: "\u2026" }) : buckets.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "qt-metric-empty", children: "no data" }) : clause.groupBy.length === 0 ? /* @__PURE__ */ jsx8(BigNumber, { bucket: buckets[0], fmt }) : clause.groupBy.length === 1 ? /* @__PURE__ */ jsx8(BarList, { buckets, fmt }) : clause.groupBy.length === 2 ? /* @__PURE__ */ jsx8(Pivot, { buckets, fmt, rowLabel: groupLabels[0], colLabel: groupLabels[1] }) : /* @__PURE__ */ jsx8(FlatTable, { buckets, fmt, groupLabels, valueLabel: metricTitle(clause, measure) })
   ] });
 }
 function BigNumber({ bucket, fmt }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "qt-metric-big", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-metric-big-value", children: fmt(bucket.value) }),
-    /* @__PURE__ */ jsxs6("span", { className: "qt-metric-big-sub", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "qt-metric-big", children: [
+    /* @__PURE__ */ jsx8("span", { className: "qt-metric-big-value", children: fmt(bucket.value) }),
+    /* @__PURE__ */ jsxs8("span", { className: "qt-metric-big-sub", children: [
       bucket.count.toLocaleString(),
       " rows"
     ] })
@@ -2826,12 +3958,12 @@ function BigNumber({ bucket, fmt }) {
 }
 function BarList({ buckets, fmt }) {
   const max = Math.max(...buckets.map((b) => barMagnitude(b)), 0);
-  return /* @__PURE__ */ jsx6("div", { className: "qt-metric-bars", children: buckets.map((b, i) => {
+  return /* @__PURE__ */ jsx8("div", { className: "qt-metric-bars", children: buckets.map((b, i) => {
     const pct = max > 0 ? barMagnitude(b) / max * 100 : 0;
-    return /* @__PURE__ */ jsxs6("div", { className: "qt-metric-bar-row", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-label", title: keyText(b.keys[0]), children: keyNode(b.keys[0]) }),
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-track", children: /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-fill", style: { width: `${pct}%` } }) }),
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-value", children: fmt(b.value) })
+    return /* @__PURE__ */ jsxs8("div", { className: "qt-metric-bar-row", children: [
+      /* @__PURE__ */ jsx8("span", { className: "qt-metric-bar-label", title: keyText(b.keys[0]), children: keyNode(b.keys[0]) }),
+      /* @__PURE__ */ jsx8("span", { className: "qt-metric-bar-track", children: /* @__PURE__ */ jsx8("span", { className: "qt-metric-bar-fill", style: { width: `${pct}%` } }) }),
+      /* @__PURE__ */ jsx8("span", { className: "qt-metric-bar-value", children: fmt(b.value) })
     ] }, `${keyText(b.keys[0])}-${i}`);
   }) });
 }
@@ -2845,22 +3977,22 @@ function Pivot({
   const colKeys = distinctKeys(buckets, 1);
   const cell = /* @__PURE__ */ new Map();
   for (const b of buckets) cell.set(`${keyText(b.keys[0])}\0${keyText(b.keys[1])}`, b.value);
-  return /* @__PURE__ */ jsx6("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs6("table", { className: "qt-metric-pivot", children: [
-    /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
-      /* @__PURE__ */ jsx6("th", { className: "qt-metric-pivot-corner", children: /* @__PURE__ */ jsxs6("span", { className: "qt-metric-pivot-axes", children: [
+  return /* @__PURE__ */ jsx8("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs8("table", { className: "qt-metric-pivot", children: [
+    /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
+      /* @__PURE__ */ jsx8("th", { className: "qt-metric-pivot-corner", children: /* @__PURE__ */ jsxs8("span", { className: "qt-metric-pivot-axes", children: [
         rowLabel,
         " ",
-        /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\\" }),
+        /* @__PURE__ */ jsx8("span", { className: "qt-muted", children: "\\" }),
         " ",
         colLabel
       ] }) }),
-      colKeys.map((c) => /* @__PURE__ */ jsx6("th", { className: "qt-metric-pivot-col", children: keyNode(c) }, keyText(c)))
+      colKeys.map((c) => /* @__PURE__ */ jsx8("th", { className: "qt-metric-pivot-col", children: keyNode(c) }, keyText(c)))
     ] }) }),
-    /* @__PURE__ */ jsx6("tbody", { children: rowKeys.map((r) => /* @__PURE__ */ jsxs6("tr", { children: [
-      /* @__PURE__ */ jsx6("th", { className: "qt-metric-pivot-row", children: keyNode(r) }),
+    /* @__PURE__ */ jsx8("tbody", { children: rowKeys.map((r) => /* @__PURE__ */ jsxs8("tr", { children: [
+      /* @__PURE__ */ jsx8("th", { className: "qt-metric-pivot-row", children: keyNode(r) }),
       colKeys.map((c) => {
         const v = cell.get(`${keyText(r)}\0${keyText(c)}`);
-        return /* @__PURE__ */ jsx6("td", { className: "qt-metric-pivot-cell", children: v === void 0 ? /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\xB7" }) : fmt(v) }, keyText(c));
+        return /* @__PURE__ */ jsx8("td", { className: "qt-metric-pivot-cell", children: v === void 0 ? /* @__PURE__ */ jsx8("span", { className: "qt-muted", children: "\xB7" }) : fmt(v) }, keyText(c));
       })
     ] }, keyText(r))) })
   ] }) });
@@ -2869,16 +4001,16 @@ function FlatTable({
   buckets,
   fmt,
   groupLabels,
-  valueLabel
+  valueLabel: valueLabel2
 }) {
-  return /* @__PURE__ */ jsx6("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs6("table", { className: "qt-metric-flat", children: [
-    /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
-      groupLabels.map((g) => /* @__PURE__ */ jsx6("th", { children: g }, g)),
-      /* @__PURE__ */ jsx6("th", { className: "qt-metric-flat-value", children: valueLabel })
+  return /* @__PURE__ */ jsx8("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs8("table", { className: "qt-metric-flat", children: [
+    /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
+      groupLabels.map((g) => /* @__PURE__ */ jsx8("th", { children: g }, g)),
+      /* @__PURE__ */ jsx8("th", { className: "qt-metric-flat-value", children: valueLabel2 })
     ] }) }),
-    /* @__PURE__ */ jsx6("tbody", { children: buckets.map((b, i) => /* @__PURE__ */ jsxs6("tr", { children: [
-      groupLabels.map((_, j) => /* @__PURE__ */ jsx6("td", { children: keyNode(b.keys[j]) }, j)),
-      /* @__PURE__ */ jsx6("td", { className: "qt-metric-flat-value", children: fmt(b.value) })
+    /* @__PURE__ */ jsx8("tbody", { children: buckets.map((b, i) => /* @__PURE__ */ jsxs8("tr", { children: [
+      groupLabels.map((_, j) => /* @__PURE__ */ jsx8("td", { children: keyNode(b.keys[j]) }, j)),
+      /* @__PURE__ */ jsx8("td", { className: "qt-metric-flat-value", children: fmt(b.value) })
     ] }, i)) })
   ] }) });
 }
@@ -2889,7 +4021,7 @@ function metricTitle(clause, measure) {
 }
 var UNIT_RENDER_KEYS = /* @__PURE__ */ new Set(["duration_ms", "byte_size"]);
 function formatMetricValue(value, op, measure, renderers, decimals) {
-  if (value == null) return /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\u2014" });
+  if (value == null) return /* @__PURE__ */ jsx8("span", { className: "qt-muted", children: "\u2014" });
   if (op === "count" || op === "count_distinct") {
     return typeof value === "number" ? formatNumber(value, 0) : String(value);
   }
@@ -2952,21 +4084,21 @@ function keyText(k) {
   return k == null ? NULL_KEY : String(k);
 }
 function keyNode(k) {
-  return k == null ? /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: NULL_KEY }) : String(k);
+  return k == null ? /* @__PURE__ */ jsx8("span", { className: "qt-muted", children: NULL_KEY }) : String(k);
 }
 
 // src/SelectionToolbar.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var cx5 = (...parts) => parts.filter(Boolean).join(" ");
 function SelectionToolbar({ selection, actions, alwaysShow, className }) {
   if (selection.count === 0 && !alwaysShow) return null;
   const selectedIds = [...selection.selected];
-  return /* @__PURE__ */ jsxs7("div", { className: cx5("qt-selection-toolbar", className), role: "toolbar", children: [
-    /* @__PURE__ */ jsxs7("span", { className: "qt-selection-count", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cx5("qt-selection-toolbar", className), role: "toolbar", children: [
+    /* @__PURE__ */ jsxs9("span", { className: "qt-selection-count", children: [
       selection.count,
       " selected"
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -2976,16 +4108,19 @@ function SelectionToolbar({ selection, actions, alwaysShow, className }) {
         children: "clear"
       }
     ),
-    /* @__PURE__ */ jsx7("span", { className: "qt-selection-actions", children: actions(selectedIds) })
+    /* @__PURE__ */ jsx9("span", { className: "qt-selection-actions", children: actions(selectedIds, selection) })
   ] });
 }
 export {
   CellMenu,
   DataTable,
   FieldPicker,
+  FilterValueProvider,
   MetricsPanel,
+  PresentedFilterValue,
   QueryBuilder,
   SavedQueriesModal,
+  SelectColumnEditor,
   SelectionToolbar,
   defaultRenderers,
   resolveRenderer,