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

package/dist/index.js

@@ -138,15 +138,69 @@ function formatRelative(iso) {
 
 // src/DataTable.tsx
 import { isComputedCellError } from "@pythia-software/query-table-core";
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+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, negateClause, opsForField, opPairsForField, isFilterable } from "@pythia-software/query-table-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var cx = (...parts) => parts.filter(Boolean).join(" ");
 var MENU_WIDTH = 320;
 var ROW_HEIGHT = 32;
@@ -196,7 +250,7 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
   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 * approxRows - 8));
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cx("qt-cell-menu", classNames?.popover),
@@ -205,11 +259,11 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
       onContextMenu: (e) => e.preventDefault(),
       role: "menu",
       children: [
-        /* @__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) })
+        /* @__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__ */ jsx(
+        /* @__PURE__ */ jsx2(
           MenuItem,
           {
             classNames,
@@ -223,11 +277,11 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
             children: "copy value"
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: cx("qt-cm-sep", classNames?.separator) }),
-        rows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "qt-cm-filter-grid", role: "group", "aria-label": "Filter by this cell", children: [
-          /* @__PURE__ */ jsx("span", { className: "qt-cm-col-head", children: "keep" }),
-          /* @__PURE__ */ jsx("span", { className: "qt-cm-col-head qt-cm-col-head--neg", children: "exclude" }),
-          rows.map((row, i) => /* @__PURE__ */ jsx(FilterPairRow, { row, value, classNames, onApply: applyClause }, i))
+        /* @__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))
         ] })
       ]
     }
@@ -239,9 +293,9 @@ function FilterPairRow({
   classNames,
   onApply
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FilterButton, { clause: row.positive, value, classNames, onApply }),
-    /* @__PURE__ */ jsx(FilterButton, { clause: row.negative, value, negative: true, 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({
@@ -251,9 +305,9 @@ function FilterButton({
   classNames,
   onApply
 }) {
-  if (!clause) return /* @__PURE__ */ jsx("span", { className: "qt-cm-filter-empty", "aria-hidden": true });
+  if (!clause) return /* @__PURE__ */ jsx2("span", { className: "qt-cm-filter-empty", "aria-hidden": true });
   const nullary = NULLARY_OPS.has(clause.op);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -261,10 +315,10 @@ function FilterButton({
       onClick: () => onApply(clause),
       role: "menuitem",
       children: [
-        /* @__PURE__ */ jsx("span", { className: "qt-cm-op", children: predicateSymbol(clause) }),
-        !nullary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("span", { className: "qt-cm-op", children: predicateSymbol(clause) }),
+        !nullary ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
           " ",
-          /* @__PURE__ */ jsx("code", { children: previewValue(value) })
+          /* @__PURE__ */ jsx2("code", { children: /* @__PURE__ */ jsx2(PresentedFilterValue, { field: clause.field, value: clause.value }) })
         ] }) : null
       ]
     }
@@ -275,7 +329,7 @@ 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);
@@ -310,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;
@@ -354,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);
@@ -687,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),
@@ -735,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,
@@ -760,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,
@@ -769,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,
@@ -827,7 +873,7 @@ function DataTable(props) {
                       },
                       onDragEnd: () => columnDrag.end(),
                       children: [
-                        /* @__PURE__ */ jsx2(
+                        /* @__PURE__ */ jsx3(
                           "input",
                           {
                             type: "checkbox",
@@ -849,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,
@@ -893,7 +939,7 @@ function DataTable(props) {
                     },
                     onDragEnd: () => columnDrag.end(),
                     children: [
-                      /* @__PURE__ */ jsxs2(
+                      /* @__PURE__ */ jsxs3(
                         "span",
                         {
                           className: "qt-th-label",
@@ -902,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 })
                             ] })
                           ]
                         }
@@ -915,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,
@@ -934,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,
@@ -945,7 +991,7 @@ function DataTable(props) {
                                 classNames?.cell,
                                 classNames?.checkboxCell
                               ),
-                              children: id != null && /* @__PURE__ */ jsx2(
+                              children: id != null && /* @__PURE__ */ jsx3(
                                 "input",
                                 {
                                   type: "checkbox",
@@ -965,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,
@@ -974,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" }) : isComputedCellError(value) ? /* @__PURE__ */ jsx2("span", { className: "qt-formula-error", title: value.computedError, children: value.computedError === "Calculating\u2026" ? "Calculating\u2026" : "Error" }) : 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",
@@ -998,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",
@@ -1014,7 +1060,7 @@ function DataTable(props) {
         ]
       }
     ),
-    menu && (menu.kind === "cell" ? /* @__PURE__ */ jsx2(
+    menu && (menu.kind === "cell" ? /* @__PURE__ */ jsx3(
       CellMenu,
       {
         field: menu.field,
@@ -1024,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,
@@ -1066,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)");
@@ -1074,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",
@@ -1091,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
       ]
     }
@@ -1102,7 +1148,7 @@ function MenuItem2({
   onClick,
   disabled
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -1160,7 +1206,7 @@ import {
   useId,
   useMemo as useMemo2,
   useRef as useRef2,
-  useState as useState3
+  useState as useState4
 } from "react";
 import {
   computedFieldName,
@@ -1215,7 +1261,7 @@ function orderPreviewGroups(groups, sort) {
 }
 
 // src/SelectColumnEditor.tsx
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+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);
@@ -1226,18 +1272,19 @@ function SelectColumnEditor({
   const titleId = useId(), dialog = useRef2(null);
   const closeRef = useRef2(onClose);
   closeRef.current = onClose;
-  const [columns, setColumns] = useState3(
+  const [columns, setColumns] = useState4(
     () => api.select.visible.map((c) => ({ ...c }))
   );
-  const [search, setSearch] = useState3(""), [active, setActive] = useState3(api.select.visible[0]?.field ?? "");
-  const [editing, setEditing] = useState3(false), [id, setId] = useState3(""), [revision, setRevision] = useState3(null);
-  const [label, setLabel] = useState3(""), [source, setSource] = useState3("");
-  const [count, setCount] = useState3(1e3), [preview, setPreview] = useState3(null), [loading, setLoading] = useState3(false);
-  const [error, setError] = useState3(null), [notice, setNotice] = useState3(""), [saving, setSaving] = useState3(false);
-  const [filter, setFilter] = useState3("all"), [page, setPage] = useState3(0), [retry, setRetry] = useState3(0), [functionSearch, setFunctionSearch] = useState3("");
-  const [previewSort, setPreviewSort] = useState3(null);
+  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] = useState3(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) : "";
@@ -1252,6 +1299,12 @@ function SelectColumnEditor({
       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();
@@ -1285,6 +1338,17 @@ function SelectColumnEditor({
       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);
@@ -1297,7 +1361,8 @@ function SelectColumnEditor({
     }
     setLoading(true);
     const timer = setTimeout(() => {
-      void api.computed.preview(
+      const request = previewRequest.current;
+      void request(
         expression,
         count,
         ac.signal,
@@ -1316,7 +1381,7 @@ function SelectColumnEditor({
       ac.abort();
       clearTimeout(timer);
     };
-  }, [expression, count, editing, id, validation, api.computed.preview, retry]);
+  }, [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);
@@ -1377,6 +1442,16 @@ function SelectColumnEditor({
     ),
     [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;
@@ -1398,7 +1473,7 @@ function SelectColumnEditor({
   };
   const previewSortHeader = (label2, key, direction = "asc") => {
     const currentDirection = previewSortDirection(key);
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -1412,7 +1487,7 @@ function SelectColumnEditor({
       }
     );
   };
-  return /* @__PURE__ */ jsx3("div", { className: "qt-modal-backdrop qt-select-editor-backdrop", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx4("div", { className: "qt-modal-backdrop qt-select-editor-backdrop", children: /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "qt-select-editor",
@@ -1422,12 +1497,12 @@ function SelectColumnEditor({
       ref: dialog,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ jsxs3("header", { className: "qt-select-editor-header", children: [
-          /* @__PURE__ */ jsxs3("div", { children: [
-            /* @__PURE__ */ jsx3("h2", { id: titleId, children: "Select columns" }),
-            /* @__PURE__ */ jsx3("p", { children: "Arrange your view, explore values, and create reusable computed columns." })
+        /* @__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__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -1438,16 +1513,16 @@ function SelectColumnEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "qt-select-editor-body", children: [
-          /* @__PURE__ */ jsxs3("aside", { className: "qt-selected-panel", children: [
-            /* @__PURE__ */ jsxs3("h3", { children: [
+        /* @__PURE__ */ jsxs4("div", { className: "qt-select-editor-body", children: [
+          /* @__PURE__ */ jsxs4("aside", { className: "qt-selected-panel", children: [
+            /* @__PURE__ */ jsxs4("h3", { children: [
               "Selected ",
-              /* @__PURE__ */ jsx3("span", { className: "qt-muted", children: columns.length })
+              /* @__PURE__ */ jsx4("span", { className: "qt-muted", children: columns.length })
             ] }),
-            /* @__PURE__ */ jsx3("p", { className: "qt-muted", children: "Drag to reorder, or use the arrow buttons." }),
-            /* @__PURE__ */ jsx3("ol", { className: "qt-editor-columns", children: columns.map((c, i) => {
+            /* @__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__ */ jsxs3(
+              return /* @__PURE__ */ jsxs4(
                 "li",
                 {
                   draggable: true,
@@ -1465,8 +1540,8 @@ function SelectColumnEditor({
                     drag.current = null;
                   },
                   children: [
-                    /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u283F" }),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u283F" }),
+                    /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -1475,7 +1550,7 @@ function SelectColumnEditor({
                         children: f?.label ?? c.field
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -1486,7 +1561,7 @@ function SelectColumnEditor({
                         children: "\u2191"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -1497,7 +1572,7 @@ function SelectColumnEditor({
                         children: "\u2193"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -1512,7 +1587,7 @@ function SelectColumnEditor({
                 c.field
               );
             }) }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1524,9 +1599,9 @@ function SelectColumnEditor({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs3("aside", { className: "qt-catalogue-panel", children: [
-            /* @__PURE__ */ jsx3("h3", { children: "Column catalogue" }),
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs4("aside", { className: "qt-catalogue-panel", children: [
+            /* @__PURE__ */ jsx4("h3", { children: "Column catalogue" }),
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 className: "qt-input",
@@ -1536,7 +1611,7 @@ function SelectColumnEditor({
                 onChange: (e) => setSearch(e.target.value)
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1545,38 +1620,40 @@ function SelectColumnEditor({
                 children: "\uFF0B Computed column"
               }
             ),
-            api.computed.loading && /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading definitions\u2026" }),
-            api.computed.error && /* @__PURE__ */ jsx3("p", { role: "alert", children: api.computed.error }),
-            /* @__PURE__ */ jsx3("div", { className: "qt-catalogue-list", children: catalogue.filter(
-              (f) => `${f.label} ${f.name} ${f.type} ${f.group ?? ""}`.toLowerCase().includes(search.toLowerCase())
-            ).map((f) => /* @__PURE__ */ jsxs3(
-              "div",
-              {
-                className: `qt-catalogue-item ${active === f.name && !editing ? "is-active" : ""}`,
-                children: [
-                  /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      type: "checkbox",
-                      "aria-label": `Include ${f.label}`,
-                      checked: columns.some((c) => c.field === f.name),
-                      onChange: () => toggle(f.name)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => browse(f.name), children: [
-                    /* @__PURE__ */ jsx3("strong", { children: f.label }),
-                    /* @__PURE__ */ jsxs3("small", { children: [
-                      isComputedField(f.name) ? "\u0192 \xB7 " : "",
-                      f.type,
-                      " \xB7 ",
-                      f.group ?? f.name
+            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__ */ jsx3(
+                  ]
+                },
+                f.name
+              );
+            }) }),
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1586,15 +1663,15 @@ function SelectColumnEditor({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs3("section", { className: "qt-column-workbench", children: [
-            editing ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-              /* @__PURE__ */ jsxs3("div", { className: "qt-editor-title", children: [
-                /* @__PURE__ */ jsx3("h3", { children: revision ? "Edit shared computed column" : "New computed column" }),
-                /* @__PURE__ */ jsx3("span", { className: "qt-type-badge", children: validation.plan?.type ?? "Check formula" })
+          /* @__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__ */ jsxs3("label", { className: "qt-editor-label", children: [
+              /* @__PURE__ */ jsxs4("label", { className: "qt-editor-label", children: [
                 "Column name",
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     className: "qt-input",
@@ -1605,10 +1682,10 @@ function SelectColumnEditor({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 Suspense,
                 {
-                  fallback: /* @__PURE__ */ jsx3(
+                  fallback: /* @__PURE__ */ jsx4(
                     "textarea",
                     {
                       "aria-label": "Computed column formula",
@@ -1616,7 +1693,7 @@ function SelectColumnEditor({
                       onChange: (e) => setSource(e.target.value)
                     }
                   ),
-                  children: /* @__PURE__ */ jsx3(
+                  children: /* @__PURE__ */ jsx4(
                     FormulaEditor,
                     {
                       value: source,
@@ -1629,9 +1706,9 @@ function SelectColumnEditor({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs3("details", { className: "qt-function-library", children: [
-                /* @__PURE__ */ jsx3("summary", { children: "Functions & examples" }),
-                /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsxs4("details", { className: "qt-function-library", children: [
+                /* @__PURE__ */ jsx4("summary", { children: "Functions & examples" }),
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     className: "qt-input",
@@ -1641,34 +1718,34 @@ function SelectColumnEditor({
                     onChange: (e) => setFunctionSearch(e.target.value)
                   }
                 ),
-                /* @__PURE__ */ jsx3("div", { className: "qt-function-list", children: FORMULA_FUNCTIONS.filter(
+                /* @__PURE__ */ jsx4("div", { className: "qt-function-list", children: FORMULA_FUNCTIONS.filter(
                   (f) => `${f.name} ${f.description}`.toLowerCase().includes(functionSearch.toLowerCase())
-                ).map((f) => /* @__PURE__ */ jsxs3(
+                ).map((f) => /* @__PURE__ */ jsxs4(
                   "button",
                   {
                     type: "button",
                     title: f.description,
                     onClick: () => setSource(`${f.name}(${source})`),
                     children: [
-                      /* @__PURE__ */ jsx3("code", { children: f.signature }),
-                      /* @__PURE__ */ jsx3("small", { children: f.description })
+                      /* @__PURE__ */ jsx4("code", { children: f.signature }),
+                      /* @__PURE__ */ jsx4("small", { children: f.description })
                     ]
                   },
                   f.name
                 )) }),
-                /* @__PURE__ */ jsxs3("p", { children: [
+                /* @__PURE__ */ jsxs4("p", { children: [
                   "Examples: ",
-                  /* @__PURE__ */ jsx3("code", { children: "LEFT([name], 3)" }),
+                  /* @__PURE__ */ jsx4("code", { children: "LEFT([name], 3)" }),
                   " \xB7",
                   " ",
-                  /* @__PURE__ */ jsx3("code", { children: 'IF([amount] > 100, "High", "Low")' }),
+                  /* @__PURE__ */ jsx4("code", { children: 'IF([amount] > 100, "High", "Low")' }),
                   " \xB7",
                   " ",
-                  /* @__PURE__ */ jsx3("code", { children: 'REGEX_EXTRACT([email], "@(.+)$", 1)' })
+                  /* @__PURE__ */ jsx4("code", { children: 'REGEX_EXTRACT([email], "@(.+)$", 1)' })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs3("div", { className: "qt-definition-actions", children: [
-                /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsxs4("div", { className: "qt-definition-actions", children: [
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1678,7 +1755,7 @@ function SelectColumnEditor({
                     children: saving ? "Saving\u2026" : revision ? "Save shared definition" : "Save definition & add column"
                   }
                 ),
-                revision && /* @__PURE__ */ jsx3(
+                revision && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1688,18 +1765,18 @@ function SelectColumnEditor({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx3("p", { className: "qt-muted", children: "Saving changes this definition across all queries. Cancel below only discards column layout changes." })
-            ] }) : /* @__PURE__ */ jsxs3("div", { className: "qt-editor-title", children: [
-              /* @__PURE__ */ jsxs3("div", { children: [
-                /* @__PURE__ */ jsx3("h3", { children: chosen?.label ?? "Explore a column" }),
-                /* @__PURE__ */ jsxs3("p", { className: "qt-muted", children: [
+              /* @__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__ */ jsxs3(Fragment3, { children: [
-                /* @__PURE__ */ jsx3(
+              chosen && isComputedField(chosen.name) && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1708,7 +1785,7 @@ function SelectColumnEditor({
                     children: "Edit definition"
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1728,11 +1805,11 @@ function SelectColumnEditor({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs3("div", { className: "qt-preview-controls", children: [
-              /* @__PURE__ */ jsxs3("label", { children: [
+            /* @__PURE__ */ jsxs4("div", { className: "qt-preview-controls", children: [
+              /* @__PURE__ */ jsxs4("label", { children: [
                 "Rows to process",
                 " ",
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     className: "qt-input",
@@ -1745,7 +1822,7 @@ function SelectColumnEditor({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
@@ -1754,10 +1831,10 @@ function SelectColumnEditor({
                   children: "Refresh preview"
                 }
               ),
-              /* @__PURE__ */ jsxs3("label", { children: [
+              /* @__PURE__ */ jsxs4("label", { children: [
                 "Show",
                 " ",
-                /* @__PURE__ */ jsxs3(
+                /* @__PURE__ */ jsxs4(
                   "select",
                   {
                     value: filter,
@@ -1766,29 +1843,29 @@ function SelectColumnEditor({
                       setPage(0);
                     },
                     children: [
-                      /* @__PURE__ */ jsx3("option", { value: "all", children: "All results" }),
-                      /* @__PURE__ */ jsx3("option", { value: "nulls", children: "Null results" }),
-                      /* @__PURE__ */ jsx3("option", { value: "errors", children: "Errors" })
+                      /* @__PURE__ */ jsx4("option", { value: "all", children: "All results" }),
+                      /* @__PURE__ */ jsx4("option", { value: "nulls", children: "Null results" }),
+                      /* @__PURE__ */ jsx4("option", { value: "errors", children: "Errors" })
                     ]
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx3("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__ */ jsx3("p", { role: "alert", children: "Choose a whole number between 1 and 10,000." }),
-            validation.error && /* @__PURE__ */ jsx3("p", { className: "qt-formula-error", role: "alert", children: validation.error }),
-            error && /* @__PURE__ */ jsx3("p", { className: "qt-formula-error", role: "alert", children: error }),
-            notice && /* @__PURE__ */ jsx3("p", { className: "qt-editor-notice", role: "status", children: notice }),
-            loading && /* @__PURE__ */ jsx3("p", { role: "status", children: "Processing preview\u2026" }),
-            preview && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-              /* @__PURE__ */ jsxs3("p", { className: "qt-preview-summary", role: "status", children: [
-                /* @__PURE__ */ jsx3("strong", { children: preview.processed.toLocaleString() }),
+            /* @__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__ */ jsx3("strong", { children: preview.groups.length.toLocaleString() }),
+                /* @__PURE__ */ jsx4("strong", { children: preview.groups.length.toLocaleString() }),
                 " ",
                 "distinct combinations \xB7 ",
                 preview.nulls.toLocaleString(),
@@ -1797,9 +1874,9 @@ function SelectColumnEditor({
                 " errors",
                 preview.processed === preview.total ? " \xB7 complete filtered set" : " \xB7 sample"
               ] }),
-              /* @__PURE__ */ jsx3("div", { className: "qt-preview-table-wrap", children: /* @__PURE__ */ jsxs3("table", { className: "qt-preview-table", children: [
-                /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
-                  editing && preview.dependencies.map((name, index) => /* @__PURE__ */ jsx3(
+              /* @__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({
@@ -1815,22 +1892,22 @@ function SelectColumnEditor({
                     },
                     name
                   )),
-                  /* @__PURE__ */ jsx3("th", { "aria-sort": previewAriaSort({ kind: "result" }), children: previewSortHeader(editing ? "Result" : "Value", {
+                  /* @__PURE__ */ jsx4("th", { "aria-sort": previewAriaSort({ kind: "result" }), children: previewSortHeader(editing ? "Result" : "Value", {
                     kind: "result"
                   }) }),
-                  /* @__PURE__ */ jsx3("th", { "aria-sort": previewAriaSort({ kind: "count" }), children: previewSortHeader("Count", { kind: "count" }, "desc") }),
-                  /* @__PURE__ */ jsx3("th", { "aria-sort": previewAriaSort({ kind: "percentage" }), children: previewSortHeader("%", { kind: "percentage" }, "desc") })
+                  /* @__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__ */ jsx3("tbody", { children: shown.map((group, i) => /* @__PURE__ */ jsxs3("tr", { children: [
-                  editing && group.inputs.map((value, j) => /* @__PURE__ */ jsx3("td", { title: display(value), children: display(value) }, j)),
-                  /* @__PURE__ */ jsxs3(
+                /* @__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__ */ jsx3(
+                        group.result.regex && /* @__PURE__ */ jsx4(
                           "button",
                           {
                             type: "button",
@@ -1842,8 +1919,8 @@ function SelectColumnEditor({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx3("td", { children: group.count.toLocaleString() }),
-                  /* @__PURE__ */ jsxs3("td", { children: [
+                  /* @__PURE__ */ jsx4("td", { children: group.count.toLocaleString() }),
+                  /* @__PURE__ */ jsxs4("td", { children: [
                     (100 * group.count / preview.processed).toFixed(
                       1
                     ),
@@ -1851,28 +1928,28 @@ function SelectColumnEditor({
                   ] })
                 ] }, i)) })
               ] }) }),
-              inspection && /* @__PURE__ */ jsxs3("div", { className: "qt-regex-inspector", children: [
-                /* @__PURE__ */ jsx3("h4", { children: "Regex match" }),
-                /* @__PURE__ */ jsxs3("pre", { children: [
+              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__ */ jsx3("mark", { children: inspection.input.slice(
+                  /* @__PURE__ */ jsx4("mark", { children: inspection.input.slice(
                     inspection.start,
                     inspection.end
                   ) }),
                   inspection.input.slice(inspection.end)
                 ] }),
-                /* @__PURE__ */ jsx3("dl", { children: inspection.groups.map((value, i) => /* @__PURE__ */ jsxs3("div", { children: [
-                  /* @__PURE__ */ jsxs3("dt", { children: [
+                /* @__PURE__ */ jsx4("dl", { children: inspection.groups.map((value, i) => /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsxs4("dt", { children: [
                     "Group ",
                     i,
                     i === 0 ? " (whole match)" : ""
                   ] }),
-                  /* @__PURE__ */ jsx3("dd", { children: display(value) })
+                  /* @__PURE__ */ jsx4("dd", { children: display(value) })
                 ] }, i)) })
               ] }),
-              !groups.length && /* @__PURE__ */ jsx3("p", { children: "No matching results in this sample." }),
-              groups.length > 50 && /* @__PURE__ */ jsxs3("div", { className: "qt-preview-pages", children: [
-                /* @__PURE__ */ jsx3(
+              !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",
@@ -1882,7 +1959,7 @@ function SelectColumnEditor({
                     children: "Previous"
                   }
                 ),
-                /* @__PURE__ */ jsxs3("span", { children: [
+                /* @__PURE__ */ jsxs4("span", { children: [
                   "Combinations ",
                   page * 50 + 1,
                   "\u2013",
@@ -1891,7 +1968,7 @@ function SelectColumnEditor({
                   " ",
                   groups.length
                 ] }),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1905,10 +1982,10 @@ function SelectColumnEditor({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs3("footer", { className: "qt-select-editor-footer", children: [
-          /* @__PURE__ */ jsx3("span", { className: "qt-muted", children: "Computed columns are display-only. Select at least one column." }),
-          /* @__PURE__ */ jsx3("button", { type: "button", className: "qt-btn", onClick: onClose, children: "Cancel layout changes" }),
-          /* @__PURE__ */ jsx3(
+        /* @__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",
@@ -1928,7 +2005,7 @@ function SelectColumnEditor({
 }
 
 // src/QueryBuilder.tsx
-import { Fragment as Fragment5, useEffect as useEffect5, useId as useId2, useMemo as useMemo4, useRef as useRef3, useState as useState5 } 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,
@@ -1948,8 +2025,8 @@ import {
 } from "@pythia-software/query-table-core";
 
 // src/FieldPicker.tsx
-import { useMemo as useMemo3, useState as useState4 } from "react";
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } 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,
@@ -1959,7 +2036,7 @@ function FieldPicker({
   onPick,
   onClose
 }) {
-  const [search, setSearch] = useState4("");
+  const [search, setSearch] = useState5("");
   const needle = search.trim().toLowerCase();
   const excludedSet = useMemo3(() => new Set(excluded ?? []), [excluded]);
   const matched = useMemo3(
@@ -1972,8 +2049,8 @@ function FieldPicker({
   );
   const grouped = useMemo3(() => groupByGroup(matched), [matched]);
   const firstEnabled = matched.find((f) => isEnabled(f, stats, gateOnDistinct));
-  return /* @__PURE__ */ jsxs4("div", { className: "qt-picker", children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { className: "qt-picker", children: [
+    /* @__PURE__ */ jsx5(
       "input",
       {
         autoFocus: true,
@@ -1992,13 +2069,13 @@ function FieldPicker({
         onBlur: () => setTimeout(() => onClose?.(), 150)
       }
     ),
-    /* @__PURE__ */ jsx4("div", { className: "qt-picker-list", children: matched.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "qt-picker-empty", children: "no matches" }) : grouped.map(([group, fs]) => /* @__PURE__ */ jsxs4("div", { className: "qt-picker-group", children: [
-      /* @__PURE__ */ jsx4("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__ */ jsxs4(
+        return /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -2012,20 +2089,20 @@ function FieldPicker({
               setSearch("");
             },
             children: [
-              /* @__PURE__ */ jsxs4("span", { className: "qt-picker-row", children: [
-                /* @__PURE__ */ jsx4("span", { className: "qt-picker-label", children: f.label }),
-                /* @__PURE__ */ jsx4("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__ */ jsxs4("span", { className: "qt-picker-alias", children: [
+              aliasHit && /* @__PURE__ */ jsxs5("span", { className: "qt-picker-alias", children: [
                 "matches: ",
                 aliasHit
               ] }),
-              s && /* @__PURE__ */ jsxs4("span", { className: "qt-picker-stats", children: [
-                s.distinct != null && /* @__PURE__ */ jsxs4(Fragment4, { 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__ */ jsxs4(Fragment4, { children: [
+                s.min != null && s.max != null && /* @__PURE__ */ jsxs5(Fragment5, { children: [
                   " ",
                   "\xB7 ",
                   fmtStat(s.min),
@@ -2080,7 +2157,7 @@ function fmtStat(v) {
 
 // src/SavedQueriesModal.tsx
 import { useEffect as useEffect4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SavedQueriesModal({ saved, onClose, onLoad }) {
   useEffect4(() => {
     function onKey(e) {
@@ -2089,7 +2166,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
-  return /* @__PURE__ */ jsx5("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx6("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "qt-modal",
@@ -2098,12 +2175,12 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
       "aria-modal": "true",
       "aria-label": "Saved queries",
       children: [
-        /* @__PURE__ */ jsx5("h3", { className: "qt-modal-title", children: "Saved queries" }),
-        saved.loading ? /* @__PURE__ */ jsx5("p", { className: "qt-muted", children: "Loading\u2026" }) : saved.items.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "qt-muted", children: "None saved yet. Save the current query from the toolbar." }) : /* @__PURE__ */ jsx5("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__ */ jsxs5("li", { className: "qt-saved-item", children: [
-            /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6("li", { className: "qt-saved-item", children: [
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 type: "button",
@@ -2114,8 +2191,8 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                   onClose();
                 },
                 children: [
-                  /* @__PURE__ */ jsx5("span", { className: "qt-saved-name", children: s.name }),
-                  /* @__PURE__ */ jsxs5("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 ",
@@ -2126,7 +2203,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                 ]
               }
             ),
-            isDefault ? /* @__PURE__ */ jsx5(
+            isDefault ? /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -2135,7 +2212,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                 onClick: () => void saved.clearDefault(),
                 children: "default"
               }
-            ) : /* @__PURE__ */ jsx5(
+            ) : /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -2145,7 +2222,7 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
                 children: "make default"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -2157,14 +2234,14 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
             )
           ] }, s.id);
         }) }),
-        /* @__PURE__ */ jsx5("div", { className: "qt-modal-footer", children: /* @__PURE__ */ jsx5("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 jsx6, jsxs as jsxs6 } 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;
@@ -2208,7 +2285,7 @@ function formatStatusTime(ms) {
   return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit", second: "2-digit" });
 }
 function useFieldHasNull(api, fieldName) {
-  const [hasNull, setHasNull] = useState5(void 0);
+  const [hasNull, setHasNull] = useState6(void 0);
   useEffect5(() => {
     if (!fieldName) return;
     let cancelled = false;
@@ -2234,7 +2311,9 @@ function predicateAsText(clause, byName) {
   const op = clause.op.replace(/_/g, " ");
   const not = clause.negated ? "not " : "";
   if (NULLARY_OPS2.has(clause.op)) return `${field} ${not}${op}`;
-  const value = clause.value === "" ? "''" : clause.value;
+  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) {
@@ -2254,9 +2333,6 @@ 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 = whereClauseSummaryText(where, byName);
   const orderText = orderBy.length === 0 ? "(default)" : orderBy.map((term) => orderByAsText(term, byName)).join(", ");
@@ -2279,15 +2355,15 @@ function QueryBuilder({
   defaultCollapsed = false
 }) {
   const UNSAVED_QUERY_EDIT_ID = "__qt-unsaved-query__";
-  const [showSaved, setShowSaved] = useState5(false);
-  const [shareCopied, setShareCopied] = useState5(false);
-  const [showAutoRefresh, setShowAutoRefresh] = useState5(false);
-  const [autoRefreshFrequencyMs, setAutoRefreshFrequencyMs] = useState5(DEFAULT_AUTO_REFRESH_FREQUENCY_MS);
-  const [autoRefreshTurnOffAfterMs, setAutoRefreshTurnOffAfterMs] = useState5(DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS);
-  const [editingSavedId, setEditingSavedId] = useState5(null);
-  const [editingSavedName, setEditingSavedName] = useState5("");
-  const [lastSavedId, setLastSavedId] = useState5(null);
-  const [collapsedFallback, setCollapsedFallback] = useState5(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) => {
@@ -2297,8 +2373,8 @@ function QueryBuilder({
     }
     setCollapsedFallback(next);
   };
-  const [lastUpdatedAt, setLastUpdatedAt] = useState5(null);
-  const [lastFailureAt, setLastFailureAt] = useState5(null);
+  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)),
@@ -2338,7 +2414,7 @@ function QueryBuilder({
   const previousLoadingRef = useRef3(api.loading);
   const autoRefreshRef = useRef3(null);
   const autoRefreshPopoverRef = useRef3(null);
-  const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState5(false);
+  const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState6(false);
   const shareFeedbackTimerRef = useRef3(null);
   useEffect5(
     () => () => {
@@ -2533,11 +2609,11 @@ function QueryBuilder({
       window.prompt("Copy this query URL", url.toString());
     }
   }
-  return /* @__PURE__ */ jsxs6("div", { className: cx3("qt-qb", classNames?.root), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "qt-qb-bar qt-qb-state-bar qt-qb-row", children: [
-      /* @__PURE__ */ jsxs6("span", { className: "qt-qb-state-main", children: [
-        /* @__PURE__ */ jsxs6("span", { className: "qt-qb-saved", children: [
-          /* @__PURE__ */ jsx6(
+  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",
@@ -2548,8 +2624,8 @@ function QueryBuilder({
               children: isSavedQuery ? "\u2605" : "\u2606"
             }
           ),
-          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs6("span", { className: "qt-qb-saved-input-wrap", children: [
-            /* @__PURE__ */ jsx6(
+          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs7("span", { className: "qt-qb-saved-input-wrap", children: [
+            /* @__PURE__ */ jsx7(
               "input",
               {
                 type: "text",
@@ -2572,7 +2648,7 @@ function QueryBuilder({
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -2586,7 +2662,7 @@ function QueryBuilder({
                 children: "\u2715"
               }
             )
-          ] }) : /* @__PURE__ */ jsx6(
+          ] }) : /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2596,17 +2672,17 @@ function QueryBuilder({
             }
           )
         ] }),
-        isCollapsed ? /* @__PURE__ */ jsxs6("span", { className: "qt-qb-summary qt-truncate", title: collapsedSummary, children: [
-          /* @__PURE__ */ jsx6("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__ */ jsx6("strong", { children: collapsedWhereText }),
+          /* @__PURE__ */ jsx7("strong", { children: collapsedWhereText }),
           " ",
-          /* @__PURE__ */ jsx6("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
+          /* @__PURE__ */ jsx7("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
           " ",
-          /* @__PURE__ */ jsx6("strong", { children: collapsedOrderText })
+          /* @__PURE__ */ jsx7("strong", { children: collapsedOrderText })
         ] }) : null
       ] }),
-      showUpdateButton ? /* @__PURE__ */ jsx6(
+      showUpdateButton ? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -2616,7 +2692,7 @@ function QueryBuilder({
           children: `Update Query '${lastSavedQuery?.name ?? "query"}'`
         }
       ) : null,
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -2627,11 +2703,11 @@ function QueryBuilder({
           children: shareCopied ? "Copied!" : "Share"
         }
       ),
-      /* @__PURE__ */ jsxs6("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__ */ jsxs6(
+      /* @__PURE__ */ jsxs7(
         "button",
         {
           type: "button",
@@ -2641,7 +2717,7 @@ function QueryBuilder({
           "aria-controls": bodyId,
           title: isCollapsed ? "Expand query builder" : "Collapse query builder",
           children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "span",
               {
                 className: cx3("qt-qb-collapse-caret", isCollapsed && "qt-qb-collapse-caret--collapsed"),
@@ -2649,38 +2725,38 @@ function QueryBuilder({
                 children: "\u25BE"
               }
             ),
-            /* @__PURE__ */ jsx6("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__ */ jsxs6("div", { className: "qt-qb-bar qt-qb-editor-bar", children: [
-      /* @__PURE__ */ jsxs6("div", { id: bodyId, className: "qt-qb-body", children: [
-        /* @__PURE__ */ jsx6(SelectRow, { api, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx6(WhereRow, { api, byName, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx6(OrderRow, { api, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx6(WindowRow, { api, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx6(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__ */ jsxs6("div", { className: "qt-qb-editor-stack", children: [
-        /* @__PURE__ */ jsx6("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.undo, disabled: !api.canUndo || isBusy, children: "\u21B6 Undo" }),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.redo, disabled: !api.canRedo || isBusy, children: "\u21B7 Redo" }),
-        /* @__PURE__ */ jsx6("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__ */ jsxs6("div", { className: "qt-qb-bar qt-qb-run-bar qt-qb-row", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-qb-run-metric qt-qb-run-metric--strong", children: api.loading ? "loading\u2026" : `${rowSummary} rows` }),
-      /* @__PURE__ */ jsxs6("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__ */ jsx6("span", { className: "qt-qb-run-error", children: failureText }) : null,
-      /* @__PURE__ */ jsxs6("span", { className: "qt-qb-run-actions", children: [
-        autoRefreshStatus ? /* @__PURE__ */ jsx6("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__ */ jsxs6("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
-          /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs7("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2691,7 +2767,7 @@ function QueryBuilder({
               children: autoRefreshButtonText
             }
           ),
-          showAutoRefresh ? /* @__PURE__ */ jsxs6(
+          showAutoRefresh ? /* @__PURE__ */ jsxs7(
             "span",
             {
               ref: autoRefreshPopoverRef,
@@ -2699,27 +2775,27 @@ function QueryBuilder({
               role: "dialog",
               "aria-label": "Auto-refresh settings",
               children: [
-                /* @__PURE__ */ jsxs6("label", { className: "qt-auto-refresh-field", children: [
-                  /* @__PURE__ */ jsx6("span", { children: "Frequency" }),
-                  /* @__PURE__ */ jsx6(
+                /* @__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__ */ jsx6("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__ */ jsxs6("label", { className: "qt-auto-refresh-field", children: [
-                  /* @__PURE__ */ jsx6("span", { children: "Turn off after" }),
-                  /* @__PURE__ */ jsx6(
+                /* @__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__ */ jsx6(
+                      children: AUTO_REFRESH_TURN_OFF_AFTER.map((option) => /* @__PURE__ */ jsx7(
                         "option",
                         {
                           value: option.value,
@@ -2731,8 +2807,8 @@ function QueryBuilder({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx6("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__ */ jsxs6("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",
@@ -2742,8 +2818,8 @@ function QueryBuilder({
                   autoRefreshStatus.pollCount,
                   " polls run."
                 ] }) : null,
-                /* @__PURE__ */ jsxs6("span", { className: "qt-auto-refresh-actions", children: [
-                  /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsxs7("span", { className: "qt-auto-refresh-actions", children: [
+                  /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -2753,7 +2829,7 @@ function QueryBuilder({
                       children: autoRefreshStatus ? "Update" : "Start"
                     }
                   ),
-                  autoRefreshStatus ? /* @__PURE__ */ jsx6(
+                  autoRefreshStatus ? /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -2770,7 +2846,7 @@ function QueryBuilder({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2782,7 +2858,7 @@ function QueryBuilder({
         )
       ] })
     ] }),
-    !isCollapsed && showSaved ? /* @__PURE__ */ jsx6(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({
@@ -2793,8 +2869,8 @@ function MoveButtons({
   onMove
 }) {
   if (count < 2) return null;
-  return /* @__PURE__ */ jsxs6("span", { className: "qt-chip-move-buttons", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-chip-move-buttons", children: [
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2806,7 +2882,7 @@ function MoveButtons({
         children: "\u2190"
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2827,8 +2903,8 @@ function SelectRow({
   disabled
 }) {
   const { select, columnDrag } = api;
-  const [editingColumns, setEditingColumns] = useState5(false);
-  const [adding, setAdding] = useState5(false);
+  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);
@@ -2836,13 +2912,13 @@ function SelectRow({
   const fieldNames = select.visible.map((c) => c.field);
   const dragSource = columnDrag.source;
   const rendered = columnDrag.preview(fieldNames);
-  return /* @__PURE__ */ jsxs6("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "select" }),
-    /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-btn", disabled, onClick: () => setEditingColumns(true), children: "Edit columns" }),
-    editingColumns && /* @__PURE__ */ jsx6(SelectColumnEditor, { api, onClose: () => setEditingColumns(false) }),
+  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__ */ jsxs6(
+      return /* @__PURE__ */ jsxs7(
         "span",
         {
           className: cx3(
@@ -2881,9 +2957,9 @@ function SelectRow({
           onDragEnd: () => columnDrag.end(),
           title: "drag to reorder",
           children: [
-            /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-            /* @__PURE__ */ jsx6("span", { className: "qt-chip-field", children: label }),
-            /* @__PURE__ */ jsx6(
+            /* @__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,
@@ -2893,13 +2969,13 @@ function SelectRow({
                 onMove: (nextPosition) => select.move(name, nextPosition)
               }
             ),
-            /* @__PURE__ */ jsx6("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__ */ jsx6(
+    adding ? /* @__PURE__ */ jsx7(
       FieldPicker,
       {
         fields: select.hidden.filter(isSelectable2),
@@ -2909,7 +2985,7 @@ function SelectRow({
         },
         onClose: () => setAdding(false)
       }
-    ) : /* @__PURE__ */ jsx6(
+    ) : /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2919,7 +2995,7 @@ function SelectRow({
         children: "+ add column"
       }
     ),
-    api.query.select.length > 0 && /* @__PURE__ */ jsx6("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) {
@@ -2936,8 +3012,8 @@ function WhereRow({
   classNames,
   disabled
 }) {
-  const [adding, setAdding] = useState5(false);
-  const [drag, setDrag] = useState5(null);
+  const [adding, setAdding] = useState6(false);
+  const [drag, setDrag] = useState6(null);
   const where = api.query.where;
   const hasOr = where.some(isOrGroup);
   function addClause(f) {
@@ -2968,12 +3044,12 @@ function WhereRow({
     }
     setDrag(null);
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "where" }),
-    where.length === 0 && !adding && /* @__PURE__ */ jsx6("span", { className: "qt-qb-hint", children: "all rows" }),
-    where.map((term, index) => /* @__PURE__ */ jsxs6("span", { className: "qt-where-term-wrap", children: [
-      index > 0 && hasOr && /* @__PURE__ */ jsx6("span", { className: "qt-where-and", children: "AND" }),
-      /* @__PURE__ */ jsx6(
+  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,
@@ -2991,7 +3067,7 @@ function WhereRow({
         }
       )
     ] }, index)),
-    adding ? /* @__PURE__ */ jsx6(
+    adding ? /* @__PURE__ */ jsx7(
       FieldPicker,
       {
         fields: fields.filter(isFilterable2),
@@ -2999,8 +3075,8 @@ function WhereRow({
         onPick: addClause,
         onClose: () => setAdding(false)
       }
-    ) : /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add filter" }),
-    where.length > 0 && /* @__PURE__ */ jsx6("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 TermChip({
@@ -3019,7 +3095,7 @@ function TermChip({
 }) {
   const group = isOrGroup(term);
   const predicates = predicatesOf(term);
-  const grip = /* @__PURE__ */ jsx6(
+  const grip = /* @__PURE__ */ jsx7(
     "span",
     {
       className: "qt-chip-grip",
@@ -3035,7 +3111,7 @@ function TermChip({
       children: "\u22EE\u22EE"
     }
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: cx3(
@@ -3053,9 +3129,9 @@ function TermChip({
       },
       children: [
         grip,
-        group ? /* @__PURE__ */ jsx6("span", { className: "qt-or-group", children: predicates.map((clause, predIndex) => /* @__PURE__ */ jsxs6("span", { className: "qt-or-member", children: [
-          predIndex > 0 && /* @__PURE__ */ jsx6("span", { className: "qt-chip-and qt-chip-or", children: "OR" }),
-          /* @__PURE__ */ jsx6(
+        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,
@@ -3067,7 +3143,7 @@ function TermChip({
               onRemove: () => api.removePredicate(index, predIndex)
             }
           )
-        ] }, predIndex)) }) : /* @__PURE__ */ jsx6(
+        ] }, predIndex)) }) : /* @__PURE__ */ jsx7(
           PredicateEditor,
           {
             api,
@@ -3109,7 +3185,7 @@ function OpPicker({
   classNames,
   onPick
 }) {
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   const wrapRef = useRef3(null);
   useEffect5(() => {
     if (!open) return;
@@ -3129,8 +3205,8 @@ function OpPicker({
   }, [open]);
   const pairs = useMemo4(() => field ? opPairsForField2(field) : [], [field]);
   const isActive = (choice) => choice.op === clause.op && Boolean(choice.negated) === Boolean(clause.negated);
-  return /* @__PURE__ */ jsxs6("span", { className: "qt-op-picker", ref: wrapRef, children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-op-picker", ref: wrapRef, children: [
+    /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -3141,15 +3217,15 @@ function OpPicker({
         onClick: () => setOpen((o) => !o),
         children: [
           choiceLabel(clause.op, Boolean(clause.negated)),
-          /* @__PURE__ */ jsx6("span", { className: "qt-op-caret", "aria-hidden": true, children: "\u25BE" })
+          /* @__PURE__ */ jsx7("span", { className: "qt-op-caret", "aria-hidden": true, children: "\u25BE" })
         ]
       }
     ),
-    open && pairs.length > 0 && /* @__PURE__ */ jsxs6("span", { className: "qt-op-pop", role: "dialog", "aria-label": "Choose condition", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-cm-col-head", children: "keep" }),
-      /* @__PURE__ */ jsx6("span", { className: "qt-cm-col-head qt-cm-col-head--neg", children: "exclude" }),
-      pairs.map((pair, i) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
-        /* @__PURE__ */ jsx6(
+    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",
           {
             type: "button",
@@ -3161,7 +3237,7 @@ function OpPicker({
             children: choiceLabel(pair.keep.op, pair.keep.negated)
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -3193,10 +3269,10 @@ function PredicateEditor({
     if (choice.negated) next.negated = true;
     onChange(next);
   }
-  return /* @__PURE__ */ jsxs6("span", { className: "qt-pred", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-chip-field", children: field?.label ?? clause.field }),
-    /* @__PURE__ */ jsx6(OpPicker, { field, clause, disabled, classNames, onPick: pickOp }),
-    needsValue && /* @__PURE__ */ jsx6(
+  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,
@@ -3208,7 +3284,7 @@ function PredicateEditor({
         onChange: (v) => onChange({ ...clause, value: v })
       }
     ),
-    /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, children: "\u2715" })
+    /* @__PURE__ */ jsx7("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, children: "\u2715" })
   ] });
 }
 function ValueInput({
@@ -3220,27 +3296,23 @@ function ValueInput({
   classNames,
   onChange
 }) {
+  const presentation = useFilterValuePresentation();
   const strategy = field ? filterValuesFor(field) : { source: "freeform" };
   if (!forceFreeform && strategy.source === "static") {
-    const selectedText = value || "\u2014";
-    const widthChars = chipFieldWidthForSelect(selectedText, 4);
-    return /* @__PURE__ */ jsxs6(
-      "select",
-      {
-        className: cx3("qt-chip-val", classNames?.select),
-        value,
-        style: { width: `${widthChars}ch` },
-        onChange: (e) => onChange(e.target.value),
-        children: [
-          /* @__PURE__ */ jsx6("option", { value: "", children: "\u2014" }),
-          strategy.options.map((o) => /* @__PURE__ */ jsx6("option", { value: o, children: o }, o))
-        ]
-      }
-    );
+    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 (forceFreeform || strategy.source === "freeform" || !field) {
     const widthChars = chipFieldWidthForInput(value || placeholder, field?.type, 5, 4);
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "input",
       {
         className: cx3("qt-chip-val", classNames?.input),
@@ -3252,7 +3324,7 @@ function ValueInput({
       }
     );
   }
-  return /* @__PURE__ */ jsx6(AutocompleteInput, { api, field, value, classNames, onChange });
+  return /* @__PURE__ */ jsx7(AutocompleteInput, { api, field, value, classNames, onChange });
 }
 function AutocompleteInput({
   api,
@@ -3261,7 +3333,7 @@ function AutocompleteInput({
   classNames,
   onChange
 }) {
-  const [result, setResult] = useState5({ values: [], hasMore: false });
+  const [result, setResult] = useState6({ values: [], hasMore: false });
   const listId = useId2();
   useEffect5(() => {
     let cancelled = false;
@@ -3277,8 +3349,8 @@ function AutocompleteInput({
       clearTimeout(t);
     };
   }, [api, field.name, value]);
-  return /* @__PURE__ */ jsxs6("span", { className: "qt-autocomplete", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("span", { className: "qt-autocomplete", children: [
+    /* @__PURE__ */ jsx7(
       "input",
       {
         className: cx3("qt-chip-val", classNames?.input),
@@ -3290,8 +3362,8 @@ function AutocompleteInput({
         onChange: (e) => onChange(e.target.value)
       }
     ),
-    /* @__PURE__ */ jsx6("datalist", { id: listId, children: result.values.map((v) => /* @__PURE__ */ jsx6("option", { value: v }, v)) }),
-    result.hasMore && /* @__PURE__ */ jsx6("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({
@@ -3317,7 +3389,7 @@ function OrderTermChip({
   label
 }) {
   const fieldHasNull = useFieldHasNull(api, field?.name);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: cx3("qt-chip", "qt-chip--col", "qt-chip--sort", isDragSource && "qt-chip--dragging", classNames?.chip),
@@ -3335,10 +3407,10 @@ function OrderTermChip({
       onDragEnd,
       title: "drag to reorder sort priority",
       children: [
-        /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-        showPriority && /* @__PURE__ */ jsx6("span", { className: "qt-chip-priority", children: priority }),
-        /* @__PURE__ */ jsx6("span", { className: "qt-chip-field", children: label }),
-        /* @__PURE__ */ jsx6(
+        /* @__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",
@@ -3348,9 +3420,9 @@ function OrderTermChip({
             children: term.dir === "asc" ? "\u2191 asc" : "\u2193 desc"
           }
         ),
-        term.extract ? /* @__PURE__ */ jsxs6("span", { className: "qt-sort-extract", children: [
-          /* @__PURE__ */ jsx6("span", { className: "qt-chip-and", children: "extract" }),
-          /* @__PURE__ */ jsx6(
+        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),
@@ -3363,7 +3435,7 @@ function OrderTermChip({
               onChange: (e) => updateTerm(dataIndex, { extract: { regex: e.target.value } })
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -3375,7 +3447,7 @@ function OrderTermChip({
               children: "\u2715"
             }
           )
-        ] }) : /* @__PURE__ */ jsx6(
+        ] }) : /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -3386,7 +3458,7 @@ function OrderTermChip({
             children: "+ regex extract"
           }
         ),
-        (term.extract != null || fieldHasNull !== false) && /* @__PURE__ */ jsxs6(
+        (term.extract != null || fieldHasNull !== false) && /* @__PURE__ */ jsxs7(
           "button",
           {
             type: "button",
@@ -3400,7 +3472,7 @@ function OrderTermChip({
             ]
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           MoveButtons,
           {
             label,
@@ -3410,7 +3482,7 @@ function OrderTermChip({
             onMove: moveTerm
           }
         ),
-        /* @__PURE__ */ jsx6("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" })
       ]
     }
   );
@@ -3423,8 +3495,8 @@ function OrderRow({
 }) {
   const orderBy = api.query.orderBy;
   const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
-  const [drag, setDrag] = useState5(null);
-  const [adding, setAdding] = useState5(false);
+  const [drag, setDrag] = useState6(null);
+  const [adding, setAdding] = useState6(false);
   function setOrderBy(next) {
     api.setSort(next);
   }
@@ -3497,12 +3569,12 @@ function OrderRow({
     const next = api.defaults.orderBy[i];
     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__ */ jsxs6("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "order by" }),
-    orderBy.length === 0 && !adding && /* @__PURE__ */ jsx6("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__ */ jsx6(
+      return /* @__PURE__ */ jsx7(
         OrderTermChip,
         {
           api,
@@ -3536,8 +3608,8 @@ function OrderRow({
         f
       );
     }),
-    adding ? /* @__PURE__ */ jsx6(FieldPicker, { fields: sortable, onPick: addTerm, onClose: () => setAdding(false) }) : /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add sort" }),
-    !isDefaultOrderBy && /* @__PURE__ */ jsx6("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({
@@ -3546,8 +3618,8 @@ function WindowRow({
   disabled
 }) {
   const { query } = api;
-  const [limitDraft, setLimitDraft] = useState5(String(query.limit));
-  const [offsetDraft, setOffsetDraft] = useState5(String(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;
@@ -3559,10 +3631,10 @@ function WindowRow({
   function commitOffset() {
     api.setOffset(Math.max(0, Number(offsetDraft) || 0));
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "qt-qb-row qt-qb-pagination", children: [
-    /* @__PURE__ */ jsxs6("label", { className: "qt-qb-window-field", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "limit" }),
-      /* @__PURE__ */ jsx6(
+  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),
@@ -3576,9 +3648,9 @@ function WindowRow({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6("label", { className: "qt-qb-window-field", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "offset" }),
-      /* @__PURE__ */ jsx6(
+    /* @__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),
@@ -3592,7 +3664,7 @@ function WindowRow({
         }
       )
     ] }),
-    !hasWindowDefault && /* @__PURE__ */ jsx6(
+    !hasWindowDefault && /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -3627,7 +3699,7 @@ function MetricsRow({
   const clauses = aggregations.clauses;
   const measurable = useMemo4(() => fields.filter(isMeasurable), [fields]);
   const groupable = useMemo4(() => fields.filter(isGroupable), [fields]);
-  const [drag, setDrag] = useState5(null);
+  const [drag, setDrag] = useState6(null);
   const ids = clauses.map((c) => c.id);
   const byId = useMemo4(() => new Map(clauses.map((c) => [c.id, c])), [clauses]);
   function previewIds() {
@@ -3655,12 +3727,12 @@ function MetricsRow({
     setDrag(null);
   }
   const rendered = previewIds();
-  return /* @__PURE__ */ jsxs6("div", { className: "qt-qb-row qt-qb-row--metrics", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "metrics" }),
-    clauses.length === 0 && /* @__PURE__ */ jsx6("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__ */ jsx6(
+      return /* @__PURE__ */ jsx7(
         MetricChip,
         {
           clause,
@@ -3685,8 +3757,8 @@ function MetricsRow({
         id
       );
     }),
-    /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-add", onClick: () => aggregations.add(), disabled, children: "+ add metric" }),
-    clauses.length > 0 && /* @__PURE__ */ jsx6("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) {
@@ -3715,11 +3787,11 @@ function MetricChip({
   count,
   onMove
 }) {
-  const [addingGroup, setAddingGroup] = useState5(false);
+  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__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: cx3("qt-chip", "qt-chip--agg", isDragSource && "qt-chip--dragging", classNames?.chip),
@@ -3737,18 +3809,18 @@ function MetricChip({
       onDragEnd,
       title: "drag to reorder metrics",
       children: [
-        /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-        /* @__PURE__ */ jsx6(
+        /* @__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__ */ jsx6("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__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "select",
           {
             className: cx3("qt-chip-val", classNames?.select),
@@ -3756,18 +3828,18 @@ function MetricChip({
             disabled,
             onChange: (e) => onChangeField(e.target.value || void 0),
             children: [
-              !needsField && /* @__PURE__ */ jsx6("option", { value: "", children: "(all rows)" }),
-              needsField && clause.field == null && /* @__PURE__ */ jsx6("option", { value: "", children: "measure\u2026" }),
-              measureOptions.map((f) => /* @__PURE__ */ jsx6("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__ */ jsxs6("span", { className: "qt-chip-agg-by", children: [
-          clause.groupBy.map((g) => /* @__PURE__ */ jsxs6("span", { className: "qt-chip-agg-group", children: [
-            /* @__PURE__ */ jsx6("span", { className: "qt-chip-agg-group-label", children: byName.get(g)?.label ?? g }),
-            /* @__PURE__ */ jsx6("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__ */ jsx6(
+          addingGroup ? /* @__PURE__ */ jsx7(
             FieldPicker,
             {
               fields: groupable,
@@ -3778,7 +3850,7 @@ function MetricChip({
               },
               onClose: () => setAddingGroup(false)
             }
-          ) : /* @__PURE__ */ jsx6(
+          ) : /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -3790,7 +3862,7 @@ function MetricChip({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           MoveButtons,
           {
             label: clause.label ?? `${AGG_OP_LABELS[clause.op]} metric`,
@@ -3800,7 +3872,7 @@ function MetricChip({
             onMove
           }
         ),
-        /* @__PURE__ */ jsx6("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" })
       ]
     }
   );
@@ -3809,7 +3881,7 @@ function MetricChip({
 // src/MetricsPanel.tsx
 import { useMemo as useMemo5 } from "react";
 import { EMPTY_QUERY } from "@pythia-software/query-table-core";
-import { jsx as jsx7, jsxs as jsxs7 } 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",
@@ -3830,15 +3902,15 @@ function MetricsPanel({
   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__ */ jsx7("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__ */ jsxs7("div", { className: cx4("qt-metrics", classNames?.root), children: [
-    error ? /* @__PURE__ */ jsxs7("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__ */ jsx7(
+    clauses.map((clause) => /* @__PURE__ */ jsx8(
       MetricCard,
       {
         clause,
@@ -3864,21 +3936,21 @@ function MetricCard({
   const groupLabels = clause.groupBy.map((g) => byName.get(g)?.label ?? g);
   const decimals = useMemo5(() => cardDecimals(buckets), [buckets]);
   const fmt = (v) => formatMetricValue(v, clause.op, measure, renderers, decimals);
-  return /* @__PURE__ */ jsxs7("div", { className: cx4("qt-metric", `qt-metric--gb${Math.min(clause.groupBy.length, 3)}`, className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "qt-metric-head", children: [
-      /* @__PURE__ */ jsx7("span", { className: "qt-metric-title", children: metricTitle(clause, measure) }),
-      groupLabels.length > 0 && /* @__PURE__ */ jsxs7("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__ */ jsx7("div", { className: "qt-metric-loading", children: "\u2026" }) : buckets.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "qt-metric-empty", children: "no data" }) : clause.groupBy.length === 0 ? /* @__PURE__ */ jsx7(BigNumber, { bucket: buckets[0], fmt }) : clause.groupBy.length === 1 ? /* @__PURE__ */ jsx7(BarList, { buckets, fmt }) : clause.groupBy.length === 2 ? /* @__PURE__ */ jsx7(Pivot, { buckets, fmt, rowLabel: groupLabels[0], colLabel: groupLabels[1] }) : /* @__PURE__ */ jsx7(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__ */ jsxs7("div", { className: "qt-metric-big", children: [
-    /* @__PURE__ */ jsx7("span", { className: "qt-metric-big-value", children: fmt(bucket.value) }),
-    /* @__PURE__ */ jsxs7("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"
     ] })
@@ -3886,12 +3958,12 @@ function BigNumber({ bucket, fmt }) {
 }
 function BarList({ buckets, fmt }) {
   const max = Math.max(...buckets.map((b) => barMagnitude(b)), 0);
-  return /* @__PURE__ */ jsx7("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__ */ jsxs7("div", { className: "qt-metric-bar-row", children: [
-      /* @__PURE__ */ jsx7("span", { className: "qt-metric-bar-label", title: keyText(b.keys[0]), children: keyNode(b.keys[0]) }),
-      /* @__PURE__ */ jsx7("span", { className: "qt-metric-bar-track", children: /* @__PURE__ */ jsx7("span", { className: "qt-metric-bar-fill", style: { width: `${pct}%` } }) }),
-      /* @__PURE__ */ jsx7("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}`);
   }) });
 }
@@ -3905,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__ */ jsx7("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs7("table", { className: "qt-metric-pivot", children: [
-    /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
-      /* @__PURE__ */ jsx7("th", { className: "qt-metric-pivot-corner", children: /* @__PURE__ */ jsxs7("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__ */ jsx7("span", { className: "qt-muted", children: "\\" }),
+        /* @__PURE__ */ jsx8("span", { className: "qt-muted", children: "\\" }),
         " ",
         colLabel
       ] }) }),
-      colKeys.map((c) => /* @__PURE__ */ jsx7("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__ */ jsx7("tbody", { children: rowKeys.map((r) => /* @__PURE__ */ jsxs7("tr", { children: [
-      /* @__PURE__ */ jsx7("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__ */ jsx7("td", { className: "qt-metric-pivot-cell", children: v === void 0 ? /* @__PURE__ */ jsx7("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))) })
   ] }) });
@@ -3931,14 +4003,14 @@ function FlatTable({
   groupLabels,
   valueLabel: valueLabel2
 }) {
-  return /* @__PURE__ */ jsx7("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs7("table", { className: "qt-metric-flat", children: [
-    /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
-      groupLabels.map((g) => /* @__PURE__ */ jsx7("th", { children: g }, g)),
-      /* @__PURE__ */ jsx7("th", { className: "qt-metric-flat-value", children: valueLabel2 })
+  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__ */ jsx7("tbody", { children: buckets.map((b, i) => /* @__PURE__ */ jsxs7("tr", { children: [
-      groupLabels.map((_, j) => /* @__PURE__ */ jsx7("td", { children: keyNode(b.keys[j]) }, j)),
-      /* @__PURE__ */ jsx7("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)) })
   ] }) });
 }
@@ -3949,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__ */ jsx7("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);
   }
@@ -4012,21 +4084,21 @@ function keyText(k) {
   return k == null ? NULL_KEY : String(k);
 }
 function keyNode(k) {
-  return k == null ? /* @__PURE__ */ jsx7("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 jsx8, jsxs as jsxs8 } 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__ */ jsxs8("div", { className: cx5("qt-selection-toolbar", className), role: "toolbar", children: [
-    /* @__PURE__ */ jsxs8("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__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -4036,14 +4108,16 @@ function SelectionToolbar({ selection, actions, alwaysShow, className }) {
         children: "clear"
       }
     ),
-    /* @__PURE__ */ jsx8("span", { className: "qt-selection-actions", children: actions(selectedIds, selection) })
+    /* @__PURE__ */ jsx9("span", { className: "qt-selection-actions", children: actions(selectedIds, selection) })
   ] });
 }
 export {
   CellMenu,
   DataTable,
   FieldPicker,
+  FilterValueProvider,
   MetricsPanel,
+  PresentedFilterValue,
   QueryBuilder,
   SavedQueriesModal,
   SelectColumnEditor,