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

package/dist/index.js

@@ -137,16 +137,18 @@ function formatRelative(iso) {
 }
 
 // src/DataTable.tsx
-import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { isComputedCellError } from "@pythia-software/query-table-core";
+import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } 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/CellMenu.tsx
 import { useEffect } from "react";
-import { NULLARY_OPS, opsForField } from "@pythia-software/query-table-core";
+import { NULLARY_OPS, negateClause, opsForField, opPairsForField, isFilterable } from "@pythia-software/query-table-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var cx = (...parts) => parts.filter(Boolean).join(" ");
-var MENU_WIDTH = 240;
+var MENU_WIDTH = 320;
 var ROW_HEIGHT = 32;
 var POINTER_OFFSET = 4;
 function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
@@ -165,73 +167,36 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
       clearTimeout(t);
     };
   }, [onClose]);
-  const ops = opsForField(field);
+  const ops = isFilterable(field) ? opsForField(field) : [];
+  const pairs = isFilterable(field) ? opPairsForField(field) : [];
+  const hasNullity = pairs.some((p) => p.keep.op === "is_null");
   const isArray = Array.isArray(value);
   const isNullish = value == null || value === "" || isArray && value.length === 0;
-  function apply(op, raw) {
-    const v = raw != null ? raw : valueToString(value);
-    onAddFilter({ field: field.name, op, value: NULLARY_OPS.has(op) ? "" : v });
+  const cellText = valueToString(value);
+  function applyClause(clause) {
+    onAddFilter(clause);
     onClose();
   }
-  const filterItems = [];
+  const rows = [];
+  const pairRow = (op, raw) => {
+    const positive = { field: field.name, op, value: NULLARY_OPS.has(op) ? "" : raw };
+    rows.push({ positive, negative: negateClause(positive, ops) });
+  };
   if (isArray && !isNullish) {
-    value.forEach((el, i) => {
-      const s = String(el);
-      const arrayOp = ops.includes("includes") ? "includes" : ops[0] ?? "=";
-      filterItems.push(
-        /* @__PURE__ */ jsxs(MenuItem, { classNames, onClick: () => apply(arrayOp, s), children: [
-          "filter: ",
-          opSymbol(arrayOp),
-          " ",
-          /* @__PURE__ */ jsx("code", { children: s })
-        ] }, `el-${i}`)
-      );
-    });
-  }
-  for (const op of ops) {
-    const nullary = NULLARY_OPS.has(op);
-    if (isNullish && !nullary) continue;
-    if (isArray && !nullary && !isNullish) continue;
-    filterItems.push(
-      /* @__PURE__ */ jsxs(MenuItem, { classNames, onClick: () => apply(op), children: [
-        "filter: ",
-        opSymbol(op),
-        !nullary && !isNullish ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx("code", { children: previewValue(value) })
-        ] }) : null
-      ] }, op)
-    );
+    const arrayOp = pairs.find((p) => p.keep.op === "includes")?.keep.op ?? pairs[0]?.keep.op ?? "=";
+    value.forEach((el) => pairRow(arrayOp, String(el)));
+    if (hasNullity) pairRow("is_null", cellText);
+  } else if (!isNullish) {
+    for (const pair of pairs) pairRow(pair.keep.op, cellText);
+  } else if (hasNullity) {
+    pairRow("is_null", cellText);
   }
-  const copyItem = /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      classNames,
-      onClick: async () => {
-        try {
-          await navigator.clipboard.writeText(valueToString(value));
-        } catch {
-        }
-        onClose();
-      },
-      children: "copy value"
-    },
-    "copy"
-  );
-  const items = [
-    /* @__PURE__ */ jsxs("div", { className: "qt-cm-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "qt-cm-field", children: field.label }),
-      /* @__PURE__ */ jsx("span", { className: "qt-cm-value", children: previewValue(value) })
-    ] }, "header"),
-    copyItem,
-    /* @__PURE__ */ jsx("div", { className: cx("qt-cm-sep", classNames?.separator) }, "sep"),
-    ...filterItems
-  ];
   const vw = typeof window !== "undefined" ? window.innerWidth : 9999;
   const vh = typeof window !== "undefined" ? window.innerHeight : 9999;
+  const approxRows = 3 + rows.length;
   const left = Math.max(8, Math.min(x + POINTER_OFFSET, vw - MENU_WIDTH - 8));
-  const top = Math.max(8, Math.min(y + POINTER_OFFSET, vh - ROW_HEIGHT * items.length - 8));
-  return /* @__PURE__ */ jsx(
+  const top = Math.max(8, Math.min(y + POINTER_OFFSET, vh - ROW_HEIGHT * approxRows - 8));
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx("qt-cell-menu", classNames?.popover),
@@ -239,7 +204,69 @@ function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
       onClick: (e) => e.stopPropagation(),
       onContextMenu: (e) => e.preventDefault(),
       role: "menu",
-      children: items
+      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__ */ jsx(
+          MenuItem,
+          {
+            classNames,
+            onClick: async () => {
+              try {
+                await navigator.clipboard.writeText(cellText);
+              } catch {
+              }
+              onClose();
+            },
+            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))
+        ] })
+      ]
+    }
+  );
+}
+function FilterPairRow({
+  row,
+  value,
+  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 })
+  ] });
+}
+function FilterButton({
+  clause,
+  value,
+  negative,
+  classNames,
+  onApply
+}) {
+  if (!clause) return /* @__PURE__ */ jsx("span", { className: "qt-cm-filter-empty", "aria-hidden": true });
+  const nullary = NULLARY_OPS.has(clause.op);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cx("qt-cm-item", "qt-cm-filter", negative && "qt-cm-filter--neg", classNames?.item),
+      onClick: () => onApply(clause),
+      role: "menuitem",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "qt-cm-op", children: predicateSymbol(clause) }),
+        !nullary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("code", { children: previewValue(value) })
+        ] }) : null
+      ]
     }
   );
 }
@@ -250,6 +277,10 @@ function MenuItem({
 }) {
   return /* @__PURE__ */ jsx("button", { type: "button", className: cx("qt-cm-item", classNames?.item), onClick, role: "menuitem", children });
 }
+function predicateSymbol(clause) {
+  const base = opSymbol(clause.op);
+  return clause.negated ? `not ${base}` : base;
+}
 function opSymbol(op) {
   switch (op) {
     case "!=":
@@ -258,6 +289,14 @@ function opSymbol(op) {
       return "\u2265";
     case "<=":
       return "\u2264";
+    case "starts_with":
+      return "starts with";
+    case "ends_with":
+      return "ends with";
+    case "matches_regex":
+      return "matches";
+    case "not_matches_regex":
+      return "not matches";
     case "is_null":
       return "is null";
     case "is_not_null":
@@ -292,6 +331,9 @@ var AUTOFIT_EXTRA_PX = 16;
 var MENU_WIDTH2 = 240;
 var MENU_ROW_HEIGHT = 32;
 var COPY_FEEDBACK_MS = 900;
+var DEFAULT_MAX_HEIGHT = 600;
+var DEFAULT_ROW_HEIGHT = 37;
+var DEFAULT_OVERSCAN = 8;
 var SELECTION_COLUMN = "__qt_selection__";
 function DataTable(props) {
   const {
@@ -307,28 +349,76 @@ function DataTable(props) {
     total = null,
     loading,
     emptyMessage,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    estimateRowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
     classNames
   } = props;
   const [menu, setMenu] = useState2(null);
-  const [resizingField, setResizingField] = useState2(null);
-  const [draftWidths, setDraftWidths] = useState2({});
   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 tableWrapRef = useRef(null);
+  const tableHeadRef = useRef(null);
+  const tableRef = useRef(null);
+  const resizeGuideRef = useRef(null);
   const resizeCommitRef = useRef(null);
+  const resizePreviewRef = useRef(null);
+  const resizeFrameRef = useRef(null);
+  const cancelResizeRef = useRef(null);
   const resizingFieldRef = useRef(null);
   const copiedCellTimerRef = useRef(null);
   const localColumnDrag = useColumnDrag();
   const columnDrag = props.columnDrag ?? localColumnDrag;
+  const rowIds = useMemo(() => rows.map(rowId), [rowId, rows]);
+  const virtualRowKeys = useMemo(
+    () => rowIds.map((id, index) => id == null ? `index:${index}` : `${typeof id}:${String(id)}`),
+    [rowIds]
+  );
+  const getVirtualRowKey = useCallback((index) => virtualRowKeys[index] ?? `index:${index}`, [virtualRowKeys]);
+  const normalizedEstimate = Number.isFinite(estimateRowHeight) ? Math.max(1, estimateRowHeight) : DEFAULT_ROW_HEIGHT;
+  const normalizedOverscan = Number.isFinite(overscan) ? Math.max(0, Math.floor(overscan)) : DEFAULT_OVERSCAN;
+  const estimateVirtualRow = useCallback(() => normalizedEstimate, [normalizedEstimate]);
+  const initialViewportHeight = typeof maxHeight === "number" && maxHeight > 0 ? maxHeight : DEFAULT_MAX_HEIGHT;
+  const initialRect = useMemo(() => ({ width: 0, height: initialViewportHeight }), [initialViewportHeight]);
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => tableWrapRef.current,
+    estimateSize: estimateVirtualRow,
+    getItemKey: getVirtualRowKey,
+    overscan: normalizedOverscan,
+    // The header participates in normal table layout even while it is sticky.
+    // Offset row measurements so the virtual range matches the body's origin.
+    scrollMargin: headerHeight,
+    initialRect
+  });
   useEffect2(() => {
     return () => {
       if (copiedCellTimerRef.current) {
         clearTimeout(copiedCellTimerRef.current);
         copiedCellTimerRef.current = null;
       }
+      cancelResizeRef.current?.();
     };
   }, []);
+  useEffect2(() => {
+    const header = tableHeadRef.current;
+    if (!header) return;
+    const measureHeader = () => {
+      const next = header.getBoundingClientRect().height;
+      setHeaderHeight((current) => current === next ? current : next);
+    };
+    measureHeader();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measureHeader);
+      return () => window.removeEventListener("resize", measureHeader);
+    }
+    const observer = new ResizeObserver(measureHeader);
+    observer.observe(header);
+    return () => observer.disconnect();
+  }, []);
   function cellKey(rowIdValue, rowIndex, fieldName) {
     return rowIdValue == null ? `row:${rowIndex}:${fieldName}` : `id:${rowIdValue}:${fieldName}`;
   }
@@ -361,7 +451,7 @@ function DataTable(props) {
     }
     showCopyFeedback(cellKey(rowIdValue, rowIndex, f.name));
   }
-  const pageIds = rows.map(rowId).filter((id) => id != null);
+  const pageIds = rowIds.filter((id) => id != null);
   const headerState = selection ? selection.pageState(pageIds) : "none";
   const showSel = selection != null;
   function sortKeyFor(f) {
@@ -396,11 +486,11 @@ function DataTable(props) {
     return col?.width ?? f.select?.width;
   }
   function resolvedWidthFor(name, f) {
-    return draftWidths[name] ?? widthFor(name, f);
+    return widthFor(name, f);
   }
   function resolvedColumnWidthFor(name, f) {
-    if (name === SELECTION_COLUMN) return draftWidths[name] ?? selectionColumnWidth;
-    return f ? resolvedWidthFor(name, f) : draftWidths[name];
+    if (name === SELECTION_COLUMN) return selectionColumnWidth;
+    return f ? resolvedWidthFor(name, f) : void 0;
   }
   function displayColumnWidthFor(name, f) {
     if (name === SELECTION_COLUMN) return resolvedColumnWidthFor(name) ?? DEFAULT_SELECTION_WIDTH;
@@ -424,16 +514,20 @@ function DataTable(props) {
     const px = clampWidth(width);
     onQueryChange((prev) => ({ ...prev, select: writeWidth(prev.select, fields, name, px) }));
   }
-  function setDraftWidth(name, width) {
-    setDraftWidths((prev) => prev[name] === width ? prev : { ...prev, [name]: width });
-  }
-  function clearDraftWidth(name) {
-    setDraftWidths((prev) => {
-      if (!(name in prev)) return prev;
-      const next = { ...prev };
-      delete next[name];
-      return next;
-    });
+  function applyResizeGuide() {
+    const preview = resizePreviewRef.current;
+    const guide = resizeGuideRef.current;
+    if (!preview || !guide) return;
+    guide.style.transform = `translateX(${preview.guideX}px)`;
+  }
+  function applyCommittedResize() {
+    const preview = resizePreviewRef.current;
+    const table = tableRef.current;
+    if (!preview || !table) return;
+    const selector = `col[data-qt-column="${cssAttributeValue(preview.name)}"]`;
+    const col = table.querySelector(selector);
+    if (col) col.style.width = `${preview.width}px`;
+    table.style.minWidth = `${preview.startTableWidth + preview.width - preview.previousWidth}px`;
   }
   function startResize(name, startWidth, e) {
     e.preventDefault();
@@ -442,30 +536,70 @@ function DataTable(props) {
     const startW = startWidth ?? e.currentTarget.parentElement?.getBoundingClientRect().width ?? DEFAULT_WIDTH;
     const previousCursor = document.body.style.cursor;
     const previousUserSelect = document.body.style.userSelect;
+    const initialWidth = clampColumnWidth(name, startW);
+    const wrap = tableWrapRef.current;
+    const wrapRect = wrap?.getBoundingClientRect();
+    const header = e.currentTarget.parentElement;
     resizeCommitRef.current = null;
+    resizePreviewRef.current = {
+      name,
+      width: initialWidth,
+      previousWidth: displayColumnWidthFor(name, fieldByName.get(name)),
+      startTableWidth: tableWidth,
+      guideX: startX - (wrapRect?.left ?? 0) + (wrap?.scrollLeft ?? 0)
+    };
     resizingFieldRef.current = name;
-    setResizingField(name);
-    setDraftWidth(name, clampColumnWidth(name, startW));
+    tableWrapRef.current?.classList.add("qt-table-wrap--resizing");
+    header?.classList.add("qt-th--resizing");
+    if (header) header.draggable = false;
+    if (resizeGuideRef.current) {
+      resizeGuideRef.current.style.display = "block";
+      resizeGuideRef.current.style.top = `${wrap?.scrollTop ?? 0}px`;
+      resizeGuideRef.current.style.height = `${wrap?.clientHeight ?? 0}px`;
+    }
+    applyResizeGuide();
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
-    const finish = () => {
+    const cleanup = (commitWidth) => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", finish);
       window.removeEventListener("pointercancel", finish);
+      if (resizeFrameRef.current != null) {
+        cancelAnimationFrame(resizeFrameRef.current);
+        resizeFrameRef.current = null;
+        applyResizeGuide();
+      }
       document.body.style.cursor = previousCursor;
       document.body.style.userSelect = previousUserSelect;
-      const commit = resizeCommitRef.current;
+      tableWrapRef.current?.classList.remove("qt-table-wrap--resizing");
+      tableRef.current?.querySelector(`th[data-qt-field="${cssAttributeValue(name)}"]`)?.classList.remove("qt-th--resizing");
+      if (header) header.draggable = true;
+      const commit = commitWidth ? resizeCommitRef.current : null;
+      if (commit) applyCommittedResize();
+      if (resizeGuideRef.current) resizeGuideRef.current.style.display = "none";
       resizeCommitRef.current = null;
+      resizePreviewRef.current = null;
       resizingFieldRef.current = null;
-      setResizingField(null);
-      clearDraftWidth(name);
+      cancelResizeRef.current = null;
       if (commit) commitColumnWidth(commit.name, commit.width);
     };
+    const finish = () => cleanup(true);
     const onMove = (ev) => {
       const next = clampColumnWidth(name, startW + (ev.clientX - startX));
       resizeCommitRef.current = { name, width: next };
-      setDraftWidth(name, next);
+      const preview = resizePreviewRef.current;
+      if (preview) {
+        preview.width = next;
+        preview.guideX = startX + (next - startW) - (wrapRect?.left ?? 0) + (wrap?.scrollLeft ?? 0);
+      }
+      if (resizeFrameRef.current == null) {
+        resizeFrameRef.current = requestAnimationFrame(() => {
+          resizeFrameRef.current = null;
+          applyResizeGuide();
+        });
+      }
     };
+    cancelResizeRef.current = () => cleanup(false);
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", finish);
     window.addEventListener("pointercancel", finish);
@@ -573,6 +707,22 @@ function DataTable(props) {
     const f = fieldByName.get(name);
     return sum + displayColumnWidthFor(name, f);
   }, trailing ? 40 : 0);
+  useEffect2(() => {
+    const wrap = tableWrapRef.current;
+    if (!wrap) return;
+    const updateCue = () => {
+      const hasMoreToRight = wrap.scrollWidth - wrap.clientWidth - wrap.scrollLeft > 2;
+      setShowHorizontalCue(hasMoreToRight);
+    };
+    updateCue();
+    window.addEventListener("resize", updateCue);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateCue);
+    observer?.observe(wrap);
+    return () => {
+      window.removeEventListener("resize", updateCue);
+      observer?.disconnect();
+    };
+  }, [renderedColumnNames, tableWidth]);
   const start = query.offset;
   const end = total != null ? Math.min(start + query.limit, total) : start + rows.length;
   const canPrev = start > 0;
@@ -580,7 +730,16 @@ function DataTable(props) {
   const prevPage = () => onQueryChange((prev) => ({ ...prev, offset: Math.max(0, prev.offset - prev.limit) }));
   const nextPage = () => onQueryChange((prev) => ({ ...prev, offset: prev.offset + prev.limit }));
   const summaryText = total == null || total === 0 ? `${rows.length} rows` : `${start + 1}\u2013${end} of ${total}`;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const firstVirtualRow = virtualRows[0];
+  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: [
+      "Swipe to see more ",
+      /* @__PURE__ */ jsx2("span", { children: "\u2192" })
+    ] }) : null,
     /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -588,24 +747,40 @@ function DataTable(props) {
         className: cx2(
           "qt-table-wrap",
           loading && "qt-table-wrap--loading",
-          !!resizingField && "qt-table-wrap--resizing",
           classNames?.wrap
         ),
         onWheel: onTableWheel,
+        style: { maxHeight, overflowY: "auto" },
+        onScroll: () => {
+          const wrap = tableWrapRef.current;
+          if (!wrap) return;
+          setShowHorizontalCue(wrap.scrollWidth - wrap.clientWidth - wrap.scrollLeft > 2);
+        },
+        role: "region",
+        "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__ */ jsxs2("table", { className: cx2("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              ref: resizeGuideRef,
+              className: cx2("qt-resize-guide", classNames?.resizeGuide),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs2("table", { ref: tableRef, className: cx2("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
             /* @__PURE__ */ jsxs2("colgroup", { children: [
               renderedColumnNames.map((name) => {
                 const f = fieldByName.get(name);
                 const w = displayColumnWidthFor(name, f);
-                if (name === SELECTION_COLUMN) return /* @__PURE__ */ jsx2("col", { style: { width: w } }, name);
+                if (name === SELECTION_COLUMN) return /* @__PURE__ */ jsx2("col", { "data-qt-column": name, style: { width: w } }, name);
                 if (!f) return null;
-                return /* @__PURE__ */ jsx2("col", { style: { width: w } }, f.name);
+                return /* @__PURE__ */ jsx2("col", { "data-qt-column": f.name, style: { width: w } }, f.name);
               }),
               trailing && /* @__PURE__ */ jsx2("col", { style: { width: 40 } })
             ] }),
-            /* @__PURE__ */ jsx2("thead", { className: classNames?.thead, children: /* @__PURE__ */ jsxs2("tr", { className: classNames?.headerRow, children: [
+            /* @__PURE__ */ jsx2("thead", { ref: tableHeadRef, className: classNames?.thead, children: /* @__PURE__ */ jsxs2("tr", { className: classNames?.headerRow, children: [
               renderedColumnNames.map((name) => {
                 if (name === SELECTION_COLUMN) {
                   return /* @__PURE__ */ jsxs2(
@@ -616,11 +791,10 @@ function DataTable(props) {
                         "qt-th",
                         "qt-checkbox-cell",
                         dragSource === name && "qt-th--dragging",
-                        resizingField === name && "qt-th--resizing",
                         classNames?.th,
                         classNames?.checkboxCell
                       ),
-                      draggable: resizingField == null,
+                      draggable: true,
                       onDragStart: (e) => {
                         if (resizingFieldRef.current) {
                           e.preventDefault();
@@ -683,11 +857,10 @@ function DataTable(props) {
                       "qt-th",
                       sortable && "qt-th--sortable",
                       dragSource === f.name && "qt-th--dragging",
-                      resizingField === f.name && "qt-th--resizing",
                       classNames?.th
                     ),
                     style: f.select?.align ? { textAlign: f.select.align } : void 0,
-                    draggable: resizingField == null,
+                    draggable: true,
                     onDragStart: (e) => {
                       if (resizingFieldRef.current) {
                         e.preventDefault();
@@ -746,12 +919,17 @@ function DataTable(props) {
             ] }) }),
             /* @__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." }) }),
-              rows.map((row, i) => {
-                const id = rowId(row);
+              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 } }) }),
+              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(
                   "tr",
                   {
+                    "data-index": i,
+                    ref: rowVirtualizer.measureElement,
                     className: cx2("qt-row", selected && "qt-row--selected", classNames?.row, selected && classNames?.rowSelected),
                     children: [
                       renderedColumnNames.map((name) => {
@@ -796,7 +974,7 @@ function DataTable(props) {
                             onClick: (e) => openMenu(e, f, row),
                             onContextMenu: (e) => openMenu(e, f, row),
                             onDoubleClick: (e) => copyCellToClipboard(e, f, id, i, value),
-                            children: copiedCellKey === key ? /* @__PURE__ */ jsx2("span", { className: "qt-cell-copy-chip", children: "\u2713 copied" }) : render({ value, row, field: f, query })
+                            children: copiedCellKey === key ? /* @__PURE__ */ 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 })
                           },
                           f.name
                         );
@@ -804,9 +982,10 @@ function DataTable(props) {
                       trailing && /* @__PURE__ */ jsx2("td", { className: cx2("qt-cell", "qt-trailing-cell", classNames?.cell), children: trailing(row) })
                     ]
                   },
-                  id != null ? String(id) : i
+                  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 } }) })
             ] }),
             /* @__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(
@@ -973,25 +1152,804 @@ function valueToString2(value) {
   return String(value);
 }
 
+// src/SelectColumnEditor.tsx
+import {
+  lazy,
+  Suspense,
+  useEffect as useEffect3,
+  useId,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import {
+  computedFieldName,
+  FORMULA_FUNCTIONS,
+  isComputedField,
+  isSelectable
+} from "@pythia-software/query-table-core";
+
+// src/previewOrdering.ts
+var collator = new Intl.Collator(void 0, {
+  numeric: true,
+  sensitivity: "base"
+});
+var valueLabel = (value) => value === null ? "NULL" : typeof value === "string" ? value : JSON.stringify(value);
+function mixedRank(group) {
+  const value = JSON.stringify([
+    group.inputs,
+    group.result.value,
+    group.result.error ?? null
+  ]);
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++)
+    hash = Math.imul(hash ^ value.charCodeAt(i), 16777619);
+  return hash >>> 0;
+}
+function compareValue(a, b) {
+  return collator.compare(valueLabel(a), valueLabel(b));
+}
+function sortValue(group, key) {
+  switch (key.kind) {
+    case "input":
+      return group.inputs[key.index] ?? null;
+    case "result":
+      return group.result.error ?? group.result.value;
+    case "count":
+    case "percentage":
+      return group.count;
+  }
+}
+function orderPreviewGroups(groups, sort) {
+  return groups.map((group, index) => ({ group, index })).sort((a, b) => {
+    if (!sort) {
+      const rank = mixedRank(a.group) - mixedRank(b.group);
+      return rank || a.index - b.index;
+    }
+    const comparison = compareValue(
+      sortValue(a.group, sort.key),
+      sortValue(b.group, sort.key)
+    );
+    return (sort.direction === "asc" ? comparison : -comparison) || a.index - b.index;
+  }).map(({ group }) => group);
+}
+
+// src/SelectColumnEditor.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormulaEditor = lazy(() => import("./FormulaEditor-YCPICDIH.js"));
+var fieldExpression = (name) => `[${name.replace(/\]/g, "]]")}]`;
+var display = (v) => v === null ? "NULL" : typeof v === "string" ? v === "" ? '""' : v : JSON.stringify(v);
+function SelectColumnEditor({
+  api,
+  onClose
+}) {
+  const titleId = useId(), dialog = useRef2(null);
+  const closeRef = useRef2(onClose);
+  closeRef.current = onClose;
+  const [columns, setColumns] = useState3(
+    () => 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 drag = useRef2(null);
+  const [inspection, setInspection] = useState3(null);
+  const catalogue = api.computed.catalogue.filter(isSelectable);
+  const chosen = catalogue.find((f) => f.name === active);
+  const expression = editing ? source : active ? fieldExpression(active) : "";
+  const validation = useMemo2(() => {
+    if (!expression)
+      return { error: "Choose a column or create a computed column." };
+    try {
+      return {
+        plan: api.computed.compile(expression, editing ? id : void 0)
+      };
+    } catch (e) {
+      return { error: e instanceof Error ? e.message : String(e) };
+    }
+  }, [expression, editing, id, api.computed.compile]);
+  useEffect3(() => {
+    const previous = document.activeElement;
+    dialog.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        if (document.querySelector(".cm-tooltip-autocomplete")) return;
+        closeRef.current();
+      }
+      if (e.key === "Tab") {
+        const focusable = Array.from(
+          dialog.current?.querySelectorAll(
+            'button:not([disabled]), input:not([disabled]), select, textarea, [tabindex="0"], [contenteditable="true"]'
+          ) ?? []
+        ).filter((el) => el.getClientRects().length);
+        const first = focusable[0], last = focusable[focusable.length - 1];
+        if (e.shiftKey && (document.activeElement === first || document.activeElement === dialog.current)) {
+          e.preventDefault();
+          last?.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const old = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = old;
+      previous?.focus();
+    };
+  }, []);
+  useEffect3(() => {
+    const ac = new AbortController();
+    setPreview(null);
+    setError(null);
+    setPage(0);
+    setInspection(null);
+    if (validation.error || !Number.isInteger(count) || count < 1 || count > 1e4) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    const timer = setTimeout(() => {
+      void api.computed.preview(
+        expression,
+        count,
+        ac.signal,
+        editing ? id : void 0,
+        editing
+      ).then((result) => {
+        if (!ac.signal.aborted) setPreview(result);
+      }).catch((e) => {
+        if (!ac.signal.aborted)
+          setError(e instanceof Error ? e.message : String(e));
+      }).finally(() => {
+        if (!ac.signal.aborted) setLoading(false);
+      });
+    }, 400);
+    return () => {
+      ac.abort();
+      clearTimeout(timer);
+    };
+  }, [expression, count, editing, id, validation, api.computed.preview, retry]);
+  const move = (field, index) => setColumns((cols) => {
+    const next = cols.filter((c) => c.field !== field), item = cols.find((c) => c.field === field);
+    if (item) next.splice(Math.max(0, Math.min(index, next.length)), 0, item);
+    return next;
+  });
+  const toggle = (field) => setColumns(
+    (cols) => cols.some((c) => c.field === field) ? cols.filter((c) => c.field !== field) : [...cols, { field }]
+  );
+  function browse(field) {
+    setActive(field);
+    setEditing(false);
+    setNotice("");
+  }
+  function edit(defId) {
+    const def = api.computed.definitions.find((d) => d.id === defId);
+    setId(def?.id ?? defId ?? crypto.randomUUID());
+    setRevision(def?.revision ?? null);
+    setLabel(def?.label ?? defId ?? "");
+    setSource(
+      def?.expression.source ?? (defId ? "" : active ? fieldExpression(active) : "LEFT([field], 3)")
+    );
+    setEditing(true);
+    setNotice("");
+  }
+  async function save() {
+    setSaving(true);
+    setError(null);
+    try {
+      const def = await api.computed.save(
+        {
+          id,
+          label: label.trim(),
+          expression: { language: "qt-expr", version: 1, source }
+        },
+        revision
+      );
+      setRevision(def.revision);
+      const field = computedFieldName(def.id);
+      setActive(field);
+      setColumns(
+        (cols) => cols.some((c) => c.field === field) ? cols : [...cols, { field }]
+      );
+      setNotice(
+        "Definition saved. All queries referencing this ID now use this definition. Apply columns to update this query\u2019s layout."
+      );
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+  const groups = useMemo2(
+    () => orderPreviewGroups(
+      (preview?.groups ?? []).filter(
+        (g) => filter === "errors" ? !!g.result.error : filter === "nulls" ? !g.result.error && g.result.value === null : true
+      ),
+      previewSort
+    ),
+    [preview, filter, previewSort]
+  );
+  const shown = groups.slice(page * 50, (page + 1) * 50);
+  const samePreviewSortKey = (a, b) => {
+    if (a.kind !== b.kind) return false;
+    if (a.kind === "input" && b.kind === "input")
+      return a.index === b.index;
+    return true;
+  };
+  const selectPreviewSort = (key, direction) => {
+    setPreviewSort((current) => {
+      const sameKey = !!current && samePreviewSortKey(current.key, key);
+      return sameKey ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction };
+    });
+    setPage(0);
+  };
+  const previewSortDirection = (key) => previewSort && samePreviewSortKey(previewSort.key, key) ? previewSort.direction : void 0;
+  const previewAriaSort = (key) => {
+    const direction = previewSortDirection(key);
+    return direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none";
+  };
+  const previewSortHeader = (label2, key, direction = "asc") => {
+    const currentDirection = previewSortDirection(key);
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        className: "qt-preview-sort",
+        onClick: () => selectPreviewSort(key, direction),
+        title: `Sort by ${label2}`,
+        children: [
+          label2,
+          currentDirection && (currentDirection === "asc" ? " \u2191" : " \u2193")
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx3("div", { className: "qt-modal-backdrop qt-select-editor-backdrop", children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "qt-select-editor",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      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__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "qt-btn",
+              onClick: onClose,
+              "aria-label": "Close column editor",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "qt-select-editor-body", children: [
+          /* @__PURE__ */ jsxs3("aside", { className: "qt-selected-panel", children: [
+            /* @__PURE__ */ jsxs3("h3", { children: [
+              "Selected ",
+              /* @__PURE__ */ jsx3("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) => {
+              const f = catalogue.find((f2) => f2.name === c.field);
+              return /* @__PURE__ */ jsxs3(
+                "li",
+                {
+                  draggable: true,
+                  onDragStart: (e) => {
+                    drag.current = c.field;
+                    e.dataTransfer.setData("text/plain", c.field);
+                  },
+                  onDragOver: (e) => e.preventDefault(),
+                  onDrop: (e) => {
+                    e.preventDefault();
+                    if (drag.current) move(drag.current, i);
+                    drag.current = null;
+                  },
+                  onDragEnd: () => {
+                    drag.current = null;
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u283F" }),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-column-name",
+                        onClick: () => browse(c.field),
+                        children: f?.label ?? c.field
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-icon-btn",
+                        disabled: i === 0,
+                        onClick: () => move(c.field, i - 1),
+                        "aria-label": `Move ${f?.label ?? c.field} up`,
+                        children: "\u2191"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-icon-btn",
+                        disabled: i === columns.length - 1,
+                        onClick: () => move(c.field, i + 1),
+                        "aria-label": `Move ${f?.label ?? c.field} down`,
+                        children: "\u2193"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "qt-icon-btn",
+                        onClick: () => toggle(c.field),
+                        "aria-label": `Remove ${f?.label ?? c.field}`,
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                },
+                c.field
+              );
+            }) }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "qt-link-btn",
+                onClick: () => setColumns(
+                  api.defaults.select.length ? api.defaults.select : catalogue.filter((f) => f.select?.default).map((f) => ({ field: f.name }))
+                ),
+                children: "Use default columns"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("aside", { className: "qt-catalogue-panel", children: [
+            /* @__PURE__ */ jsx3("h3", { children: "Column catalogue" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                className: "qt-input",
+                "aria-label": "Search columns",
+                placeholder: "Search name or type\u2026",
+                value: search,
+                onChange: (e) => setSearch(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "qt-btn qt-create-computed",
+                onClick: () => edit(),
+                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
+                    ] })
+                  ] })
+                ]
+              },
+              f.name
+            )) }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "qt-link-btn",
+                onClick: () => void api.computed.reload(),
+                children: "Reload shared definitions"
+              }
+            )
+          ] }),
+          /* @__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__ */ jsxs3("label", { className: "qt-editor-label", children: [
+                "Column name",
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    className: "qt-input",
+                    value: label,
+                    maxLength: 200,
+                    onChange: (e) => setLabel(e.target.value),
+                    placeholder: "e.g. Email domain"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3(
+                Suspense,
+                {
+                  fallback: /* @__PURE__ */ jsx3(
+                    "textarea",
+                    {
+                      "aria-label": "Computed column formula",
+                      value: source,
+                      onChange: (e) => setSource(e.target.value)
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx3(
+                    FormulaEditor,
+                    {
+                      value: source,
+                      onChange: setSource,
+                      fields: api.computed.catalogue.filter(
+                        (f) => f.name !== computedFieldName(id)
+                      ),
+                      compile: (value) => api.computed.compile(value, id)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs3("details", { className: "qt-function-library", children: [
+                /* @__PURE__ */ jsx3("summary", { children: "Functions & examples" }),
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    className: "qt-input",
+                    "aria-label": "Search functions",
+                    placeholder: "Search functions\u2026",
+                    value: functionSearch,
+                    onChange: (e) => setFunctionSearch(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { className: "qt-function-list", children: FORMULA_FUNCTIONS.filter(
+                  (f) => `${f.name} ${f.description}`.toLowerCase().includes(functionSearch.toLowerCase())
+                ).map((f) => /* @__PURE__ */ jsxs3(
+                  "button",
+                  {
+                    type: "button",
+                    title: f.description,
+                    onClick: () => setSource(`${f.name}(${source})`),
+                    children: [
+                      /* @__PURE__ */ jsx3("code", { children: f.signature }),
+                      /* @__PURE__ */ jsx3("small", { children: f.description })
+                    ]
+                  },
+                  f.name
+                )) }),
+                /* @__PURE__ */ jsxs3("p", { children: [
+                  "Examples: ",
+                  /* @__PURE__ */ jsx3("code", { children: "LEFT([name], 3)" }),
+                  " \xB7",
+                  " ",
+                  /* @__PURE__ */ jsx3("code", { children: 'IF([amount] > 100, "High", "Low")' }),
+                  " \xB7",
+                  " ",
+                  /* @__PURE__ */ jsx3("code", { children: 'REGEX_EXTRACT([email], "@(.+)$", 1)' })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "qt-definition-actions", children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    disabled: saving || !!validation.error || !label.trim(),
+                    onClick: () => void save(),
+                    children: saving ? "Saving\u2026" : revision ? "Save shared definition" : "Save definition & add column"
+                  }
+                ),
+                revision && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-link-btn",
+                    onClick: () => edit(id),
+                    children: "Reload editor from catalogue"
+                  }
+                )
+              ] }),
+              /* @__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: [
+                  chosen?.name,
+                  " ",
+                  chosen ? `\xB7 ${chosen.type}` : ""
+                ] })
+              ] }),
+              chosen && isComputedField(chosen.name) && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    onClick: () => edit(chosen.name.slice(10)),
+                    children: "Edit definition"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    onClick: () => {
+                      const def = api.computed.definitions.find(
+                        (d) => computedFieldName(d.id) === chosen.name
+                      );
+                      edit();
+                      if (def) {
+                        setLabel(`${def.label} copy`);
+                        setSource(def.expression.source);
+                      }
+                    },
+                    children: "Duplicate"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "qt-preview-controls", children: [
+              /* @__PURE__ */ jsxs3("label", { children: [
+                "Rows to process",
+                " ",
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    className: "qt-input",
+                    type: "number",
+                    min: 1,
+                    max: 1e4,
+                    step: 1,
+                    value: Number.isNaN(count) ? "" : count,
+                    onChange: (e) => setCount(e.target.valueAsNumber)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "qt-btn",
+                  onClick: () => setRetry((n) => n + 1),
+                  children: "Refresh preview"
+                }
+              ),
+              /* @__PURE__ */ jsxs3("label", { children: [
+                "Show",
+                " ",
+                /* @__PURE__ */ jsxs3(
+                  "select",
+                  {
+                    value: filter,
+                    onChange: (e) => {
+                      setFilter(e.target.value);
+                      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__ */ 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() }),
+                " of",
+                " ",
+                preview.total.toLocaleString(),
+                " matching rows \xB7",
+                " ",
+                /* @__PURE__ */ jsx3("strong", { children: preview.groups.length.toLocaleString() }),
+                " ",
+                "distinct combinations \xB7 ",
+                preview.nulls.toLocaleString(),
+                " null \xB7 ",
+                preview.errors.toLocaleString(),
+                " errors",
+                preview.processed === preview.total ? " \xB7 complete filtered set" : " \xB7 sample"
+              ] }),
+              /* @__PURE__ */ 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(
+                    "th",
+                    {
+                      "aria-sort": previewAriaSort({
+                        kind: "input",
+                        index
+                      }),
+                      children: previewSortHeader(
+                        api.computed.catalogue.find(
+                          (f) => f.name === name
+                        )?.label ?? name,
+                        { kind: "input", index }
+                      )
+                    },
+                    name
+                  )),
+                  /* @__PURE__ */ jsx3("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__ */ 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(
+                    "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(
+                          "button",
+                          {
+                            type: "button",
+                            className: "qt-link-btn",
+                            onClick: () => setInspection(group.result.regex),
+                            children: "Inspect match"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3("td", { children: group.count.toLocaleString() }),
+                  /* @__PURE__ */ jsxs3("td", { children: [
+                    (100 * group.count / preview.processed).toFixed(
+                      1
+                    ),
+                    "%"
+                  ] })
+                ] }, i)) })
+              ] }) }),
+              inspection && /* @__PURE__ */ jsxs3("div", { className: "qt-regex-inspector", children: [
+                /* @__PURE__ */ jsx3("h4", { children: "Regex match" }),
+                /* @__PURE__ */ jsxs3("pre", { children: [
+                  inspection.input.slice(0, inspection.start),
+                  /* @__PURE__ */ jsx3("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: [
+                    "Group ",
+                    i,
+                    i === 0 ? " (whole match)" : ""
+                  ] }),
+                  /* @__PURE__ */ jsx3("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(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    disabled: page === 0,
+                    onClick: () => setPage((n) => n - 1),
+                    children: "Previous"
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("span", { children: [
+                  "Combinations ",
+                  page * 50 + 1,
+                  "\u2013",
+                  Math.min((page + 1) * 50, groups.length),
+                  " of",
+                  " ",
+                  groups.length
+                ] }),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "qt-btn",
+                    disabled: (page + 1) * 50 >= groups.length,
+                    onClick: () => setPage((n) => n + 1),
+                    children: "Next"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__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(
+            "button",
+            {
+              type: "button",
+              className: "qt-btn qt-primary",
+              disabled: !columns.length || columns.length > 200,
+              onClick: () => {
+                api.setQuery((q) => ({ ...q, select: columns }));
+                onClose();
+              },
+              children: "Apply columns"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
 // src/QueryBuilder.tsx
-import { useEffect as useEffect4, useId, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect5, useId as useId2, useMemo as useMemo4, useRef as useRef3, useState as useState5 } from "react";
 import {
   NULLARY_OPS as NULLARY_OPS2,
   aggOpNeedsField,
   aggOpsForField,
+  encodeQuery,
   filterValues as filterValuesFor,
   isGroupable,
   isMeasurable,
+  isOrGroup,
+  opPairsForField as opPairsForField2,
+  predicatesOf,
   queriesEqual,
-  isFilterable,
-  isSelectable,
+  isFilterable as isFilterable2,
+  isSelectable as isSelectable2,
   isSortable as isSortable2,
   opsForField as opsForField2
 } from "@pythia-software/query-table-core";
 
 // src/FieldPicker.tsx
-import { useMemo as useMemo2, useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo as useMemo3, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var UNGROUPED = "other";
 function FieldPicker({
   fields,
@@ -1001,10 +1959,10 @@ function FieldPicker({
   onPick,
   onClose
 }) {
-  const [search, setSearch] = useState3("");
+  const [search, setSearch] = useState4("");
   const needle = search.trim().toLowerCase();
-  const excludedSet = useMemo2(() => new Set(excluded ?? []), [excluded]);
-  const matched = useMemo2(
+  const excludedSet = useMemo3(() => new Set(excluded ?? []), [excluded]);
+  const matched = useMemo3(
     () => fields.filter((f) => {
       if (excludedSet.has(f.name)) return false;
       if (!needle) return true;
@@ -1012,10 +1970,10 @@ function FieldPicker({
     }),
     [fields, excludedSet, needle]
   );
-  const grouped = useMemo2(() => groupByGroup(matched), [matched]);
+  const grouped = useMemo3(() => groupByGroup(matched), [matched]);
   const firstEnabled = matched.find((f) => isEnabled(f, stats, gateOnDistinct));
-  return /* @__PURE__ */ jsxs3("div", { className: "qt-picker", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { className: "qt-picker", children: [
+    /* @__PURE__ */ jsx4(
       "input",
       {
         autoFocus: true,
@@ -1034,40 +1992,40 @@ function FieldPicker({
         onBlur: () => setTimeout(() => onClose?.(), 150)
       }
     ),
-    /* @__PURE__ */ jsx3("div", { className: "qt-picker-list", children: matched.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "qt-picker-empty", children: "no matches" }) : grouped.map(([group, fs]) => /* @__PURE__ */ jsxs3("div", { className: "qt-picker-group", children: [
-      /* @__PURE__ */ jsx3("div", { className: "qt-picker-group-label", children: group }),
+    /* @__PURE__ */ 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 }),
       fs.map((f) => {
         const enabled = isEnabled(f, stats, gateOnDistinct);
         const s = stats?.[f.name];
         const aliasHit = aliasMatch(f, needle);
-        return /* @__PURE__ */ jsxs3(
+        return /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
             disabled: !enabled,
             className: enabled ? "qt-picker-item" : "qt-picker-item qt-picker-item--disabled",
             title: enabled ? f.name : "not useful as a filter (\u22641 distinct value)",
-            onMouseDown: (e) => {
+            onPointerDown: (e) => {
               if (!enabled) return;
               e.preventDefault();
               onPick(f);
               setSearch("");
             },
             children: [
-              /* @__PURE__ */ jsxs3("span", { className: "qt-picker-row", children: [
-                /* @__PURE__ */ jsx3("span", { className: "qt-picker-label", children: f.label }),
-                /* @__PURE__ */ jsx3("span", { className: "qt-picker-name", children: f.name })
+              /* @__PURE__ */ 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 })
               ] }),
-              aliasHit && /* @__PURE__ */ jsxs3("span", { className: "qt-picker-alias", children: [
+              aliasHit && /* @__PURE__ */ jsxs4("span", { className: "qt-picker-alias", children: [
                 "matches: ",
                 aliasHit
               ] }),
-              s && /* @__PURE__ */ jsxs3("span", { className: "qt-picker-stats", children: [
-                s.distinct != null && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+              s && /* @__PURE__ */ jsxs4("span", { className: "qt-picker-stats", children: [
+                s.distinct != null && /* @__PURE__ */ jsxs4(Fragment4, { children: [
                   s.distinct,
                   " distinct"
                 ] }),
-                s.min != null && s.max != null && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                s.min != null && s.max != null && /* @__PURE__ */ jsxs4(Fragment4, { children: [
                   " ",
                   "\xB7 ",
                   fmtStat(s.min),
@@ -1121,86 +2079,97 @@ function fmtStat(v) {
 }
 
 // src/SavedQueriesModal.tsx
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function SavedQueriesModal({ saved, onClose, onLoad }) {
-  useEffect3(() => {
+  useEffect4(() => {
     function onKey(e) {
       if (e.key === "Escape") onClose();
     }
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-  return /* @__PURE__ */ jsx4("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs4("div", { className: "qt-modal", onClick: (e) => e.stopPropagation(), role: "dialog", "aria-label": "Saved queries", children: [
-    /* @__PURE__ */ jsx4("h3", { className: "qt-modal-title", children: "Saved queries" }),
-    saved.loading ? /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "Loading\u2026" }) : saved.items.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "None saved yet. Save the current query from the toolbar." }) : /* @__PURE__ */ jsx4("ul", { className: "qt-saved-list", children: saved.items.map((s) => {
-      const filters = s.query.where.length;
-      const isDefault = saved.defaultId === s.id;
-      return /* @__PURE__ */ jsxs4("li", { className: "qt-saved-item", children: [
-        /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            type: "button",
-            className: "qt-saved-pick",
-            onClick: () => {
-              onLoad?.(s.id);
-              saved.load(s.id);
-              onClose();
-            },
-            children: [
-              /* @__PURE__ */ jsx4("span", { className: "qt-saved-name", children: s.name }),
-              /* @__PURE__ */ jsxs4("span", { className: "qt-saved-meta qt-muted", children: [
-                isDefault ? "Default view \xB7 " : "",
-                new Date(s.savedAt).toLocaleString(),
-                " \xB7 ",
-                filters,
-                " filter",
-                filters === 1 ? "" : "s"
-              ] })
-            ]
-          }
-        ),
-        isDefault ? /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            className: "qt-btn qt-saved-default",
-            title: "Clear default view",
-            onClick: () => void saved.clearDefault(),
-            children: "default"
-          }
-        ) : /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            className: "qt-btn qt-saved-default",
-            title: "Use as default view",
-            onClick: () => void saved.setDefault(s.id),
-            children: "make default"
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            className: "qt-btn qt-saved-delete",
-            title: "Delete saved query",
-            onClick: () => void saved.remove(s.id),
-            children: "delete"
-          }
-        )
-      ] }, s.id);
-    }) }),
-    /* @__PURE__ */ jsx4("div", { className: "qt-modal-footer", children: /* @__PURE__ */ jsx4("button", { type: "button", className: "qt-btn", onClick: onClose, children: "close" }) })
-  ] }) });
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx5("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "qt-modal",
+      onClick: (e) => e.stopPropagation(),
+      role: "dialog",
+      "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) => {
+          const filters = s.query.where.length;
+          const isDefault = saved.defaultId === s.id;
+          return /* @__PURE__ */ jsxs5("li", { className: "qt-saved-item", children: [
+            /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                className: "qt-saved-pick",
+                onClick: () => {
+                  onLoad?.(s.id);
+                  saved.load(s.id);
+                  onClose();
+                },
+                children: [
+                  /* @__PURE__ */ jsx5("span", { className: "qt-saved-name", children: s.name }),
+                  /* @__PURE__ */ jsxs5("span", { className: "qt-saved-meta qt-muted", children: [
+                    isDefault ? "Default view \xB7 " : "",
+                    new Date(s.savedAt).toLocaleString(),
+                    " \xB7 ",
+                    filters,
+                    " filter",
+                    filters === 1 ? "" : "s"
+                  ] })
+                ]
+              }
+            ),
+            isDefault ? /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "qt-btn qt-saved-default",
+                title: "Clear default view",
+                onClick: () => void saved.clearDefault(),
+                children: "default"
+              }
+            ) : /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "qt-btn qt-saved-default",
+                title: "Use as default view",
+                onClick: () => void saved.setDefault(s.id),
+                children: "make default"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "qt-btn qt-saved-delete",
+                title: "Delete saved query",
+                onClick: () => void saved.remove(s.id),
+                children: "delete"
+              }
+            )
+          ] }, s.id);
+        }) }),
+        /* @__PURE__ */ jsx5("div", { className: "qt-modal-footer", children: /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-btn", onClick: onClose, children: "close" }) })
+      ]
+    }
+  ) });
 }
 
 // src/QueryBuilder.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } 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;
 var DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS = 5 * 6e4;
+var SHARE_FEEDBACK_MS = 2e3;
 var AUTO_REFRESH_FREQUENCIES = [
   { label: "Every 5s", value: 5e3 },
   { label: "Every 10s", value: 1e4 },
@@ -1239,8 +2208,8 @@ function formatStatusTime(ms) {
   return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit", second: "2-digit" });
 }
 function useFieldHasNull(api, fieldName) {
-  const [hasNull, setHasNull] = useState4(void 0);
-  useEffect4(() => {
+  const [hasNull, setHasNull] = useState5(void 0);
+  useEffect5(() => {
     if (!fieldName) return;
     let cancelled = false;
     void api.filterValues(fieldName, "").then((r) => {
@@ -1256,17 +2225,27 @@ function useFieldHasNull(api, fieldName) {
   }, [api, fieldName]);
   return hasNull;
 }
-function whereClauseAsText(clause, byName) {
+var CONVERGED_NEGATIVE_OPS = /* @__PURE__ */ new Set(["!=", "is_not_null", "not_matches_regex"]);
+function positiveOpsForField(field) {
+  return opsForField2(field).filter((op) => !CONVERGED_NEGATIVE_OPS.has(op));
+}
+function predicateAsText(clause, byName) {
   const field = byName.get(clause.field)?.label ?? clause.field;
   const op = clause.op.replace(/_/g, " ");
-  if (NULLARY_OPS2.has(clause.op)) return `${field} ${op}`;
+  const not = clause.negated ? "not " : "";
+  if (NULLARY_OPS2.has(clause.op)) return `${field} ${not}${op}`;
   const value = clause.value === "" ? "''" : clause.value;
-  return `${field} ${op} ${value}`;
+  return `${field} ${not}${op} ${value}`;
+}
+function whereTermAsText(term, byName) {
+  if (isOrGroup(term)) return `(${term.any.map((c) => predicateAsText(c, byName)).join(" or ")})`;
+  return predicateAsText(term, byName);
 }
 function orderByAsText(term, byName) {
   const field = byName.get(term.field)?.label ?? term.field;
+  const expression = term.extract ? `regex_extract(${field}, /${term.extract.regex}/)` : field;
   const nulls = term.nulls ? ` nulls ${term.nulls}` : "";
-  return `${field} ${term.dir}${nulls}`;
+  return `${expression} ${term.dir}${nulls}`;
 }
 function chipFieldWidthChars(text, fallback = 5, max = 30) {
   return Math.min(max, Math.max(fallback, (text || "").length + 1));
@@ -1279,12 +2258,12 @@ function chipFieldWidthForSelect(text, fallback = 3, max = 30) {
   return chipFieldWidthChars(text, fallback, max) + 2;
 }
 function buildCollapsedSummary(where, orderBy, byName) {
-  const whereText = where.length === 0 ? "all rows" : where.map((c) => whereClauseAsText(c, byName)).join(" and ");
+  const whereText = whereClauseSummaryText(where, byName);
   const orderText = orderBy.length === 0 ? "(default)" : orderBy.map((term) => orderByAsText(term, byName)).join(", ");
   return `WHERE ${whereText} ORDER BY ${orderText}`;
 }
 function whereClauseSummaryText(where, byName) {
-  return where.length === 0 ? "all rows" : where.map((c) => whereClauseAsText(c, byName)).join(" and ");
+  return where.length === 0 ? "all rows" : where.map((t) => whereTermAsText(t, byName)).join(" and ");
 }
 function orderBySummaryText(orderBy, byName) {
   return orderBy.length === 0 ? "(default)" : orderBy.map((term) => orderByAsText(term, byName)).join(", ");
@@ -1300,14 +2279,15 @@ function QueryBuilder({
   defaultCollapsed = false
 }) {
   const UNSAVED_QUERY_EDIT_ID = "__qt-unsaved-query__";
-  const [showSaved, setShowSaved] = useState4(false);
-  const [showAutoRefresh, setShowAutoRefresh] = useState4(false);
-  const [autoRefreshFrequencyMs, setAutoRefreshFrequencyMs] = useState4(DEFAULT_AUTO_REFRESH_FREQUENCY_MS);
-  const [autoRefreshTurnOffAfterMs, setAutoRefreshTurnOffAfterMs] = useState4(DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS);
-  const [editingSavedId, setEditingSavedId] = useState4(null);
-  const [editingSavedName, setEditingSavedName] = useState4("");
-  const [lastSavedId, setLastSavedId] = useState4(null);
-  const [collapsedFallback, setCollapsedFallback] = useState4(defaultCollapsed);
+  const [showSaved, setShowSaved] = 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 collapsedControlled = typeof collapsed !== "undefined";
   const isCollapsed = collapsedControlled ? collapsed : collapsedFallback;
   const setCollapsed = (next) => {
@@ -1317,31 +2297,31 @@ function QueryBuilder({
     }
     setCollapsedFallback(next);
   };
-  const [lastUpdatedAt, setLastUpdatedAt] = useState4(null);
-  const [lastFailureAt, setLastFailureAt] = useState4(null);
-  const byName = useMemo3(() => new Map(fields.map((f) => [f.name, f])), [fields]);
-  const activeSavedQuery = useMemo3(
+  const [lastUpdatedAt, setLastUpdatedAt] = useState5(null);
+  const [lastFailureAt, setLastFailureAt] = useState5(null);
+  const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const activeSavedQuery = useMemo4(
     () => api.saved.items.find((item) => queriesEqual(item.query, api.query)),
     [api.query, api.saved.items]
   );
-  const lastSavedQuery = useMemo3(
+  const lastSavedQuery = useMemo4(
     () => api.saved.items.find((item) => item.id === lastSavedId) ?? null,
     [api.saved.items, lastSavedId]
   );
   const isSavedQuery = activeSavedQuery != null;
   const isEditingUnsaved = editingSavedId === UNSAVED_QUERY_EDIT_ID;
-  const bodyId = useId();
+  const bodyId = useId2();
   const isEditingSaved = editingSavedId != null && activeSavedQuery?.id === editingSavedId;
   const showUpdateButton = Boolean(lastSavedQuery) && !activeSavedQuery;
-  const collapsedSummary = useMemo3(
+  const collapsedSummary = useMemo4(
     () => buildCollapsedSummary(api.query.where, api.query.orderBy, byName),
     [api.query.where, api.query.orderBy, byName]
   );
-  const collapsedWhereText = useMemo3(
+  const collapsedWhereText = useMemo4(
     () => whereClauseSummaryText(api.query.where, byName),
     [api.query.where, byName]
   );
-  const collapsedOrderText = useMemo3(
+  const collapsedOrderText = useMemo4(
     () => orderBySummaryText(api.query.orderBy, byName),
     [api.query.orderBy, byName]
   );
@@ -1353,13 +2333,27 @@ function QueryBuilder({
   const lastUpdatedText = formatStatusTime(lastUpdatedAt);
   const failureText = api.error ? `Error: ${api.error.message}` : lastFailureAt ? `Last failure at ${formatStatusTime(lastFailureAt)}` : null;
   const isBusy = Boolean(running) || api.loading;
-  const lastRowsRef = useRef2(null);
-  const lastTotalRef = useRef2(null);
-  const previousLoadingRef = useRef2(api.loading);
-  const autoRefreshRef = useRef2(null);
-  const autoRefreshPopoverRef = useRef2(null);
-  const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState4(false);
-  useEffect4(() => {
+  const lastRowsRef = useRef3(null);
+  const lastTotalRef = useRef3(null);
+  const previousLoadingRef = useRef3(api.loading);
+  const autoRefreshRef = useRef3(null);
+  const autoRefreshPopoverRef = useRef3(null);
+  const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState5(false);
+  const shareFeedbackTimerRef = useRef3(null);
+  useEffect5(
+    () => () => {
+      if (shareFeedbackTimerRef.current) clearTimeout(shareFeedbackTimerRef.current);
+    },
+    []
+  );
+  useEffect5(() => {
+    setShareCopied(false);
+    if (shareFeedbackTimerRef.current) {
+      clearTimeout(shareFeedbackTimerRef.current);
+      shareFeedbackTimerRef.current = null;
+    }
+  }, [api.query]);
+  useEffect5(() => {
     if (activeSavedQuery) {
       setLastSavedId(activeSavedQuery.id);
       if (!isEditingSaved) {
@@ -1373,11 +2367,11 @@ function QueryBuilder({
       setEditingSavedName("");
     }
   }, [activeSavedQuery, isEditingSaved, isEditingUnsaved]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!lastSavedId || api.saved.items.some((item) => item.id === lastSavedId)) return;
     setLastSavedId(null);
   }, [api.saved.items, lastSavedId]);
-  useEffect4(() => {
+  useEffect5(() => {
     const hasData = api.rows.length > 0 || total != null;
     const rowsChanged = lastRowsRef.current !== api.rows;
     const totalChanged = lastTotalRef.current !== total;
@@ -1472,15 +2466,15 @@ function QueryBuilder({
       return;
     }
   }
-  useEffect4(() => {
+  useEffect5(() => {
     if (isCollapsed) setShowSaved(false);
   }, [isCollapsed]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!showAutoRefresh || !autoRefreshStatus) return;
     setAutoRefreshFrequencyMs(autoRefreshStatus.frequencyMs);
     setAutoRefreshTurnOffAfterMs(autoRefreshStatus.turnOffAfterMs);
   }, [showAutoRefresh, autoRefreshStatus]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!showAutoRefresh) return;
     function onDocumentClick(event) {
       const wrapper = autoRefreshRef.current;
@@ -1523,11 +2517,27 @@ function QueryBuilder({
       saveFailed(error);
     }
   }
-  return /* @__PURE__ */ jsxs5("div", { className: cx3("qt-qb", classNames?.root), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "qt-qb-bar qt-qb-state-bar qt-qb-row", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "qt-qb-state-main", children: [
-        /* @__PURE__ */ jsxs5("span", { className: "qt-qb-saved", children: [
-          /* @__PURE__ */ jsx5(
+  async function shareQuery() {
+    if (typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    url.searchParams.set("q", encodeQuery(api.query));
+    try {
+      await navigator.clipboard.writeText(url.toString());
+      setShareCopied(true);
+      if (shareFeedbackTimerRef.current) clearTimeout(shareFeedbackTimerRef.current);
+      shareFeedbackTimerRef.current = setTimeout(() => {
+        setShareCopied(false);
+        shareFeedbackTimerRef.current = null;
+      }, SHARE_FEEDBACK_MS);
+    } catch {
+      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(
             "button",
             {
               type: "button",
@@ -1538,8 +2548,8 @@ function QueryBuilder({
               children: isSavedQuery ? "\u2605" : "\u2606"
             }
           ),
-          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs5("span", { className: "qt-qb-saved-input-wrap", children: [
-            /* @__PURE__ */ jsx5(
+          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs6("span", { className: "qt-qb-saved-input-wrap", children: [
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 type: "text",
@@ -1562,7 +2572,7 @@ function QueryBuilder({
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -1576,7 +2586,7 @@ function QueryBuilder({
                 children: "\u2715"
               }
             )
-          ] }) : /* @__PURE__ */ jsx5(
+          ] }) : /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1586,17 +2596,17 @@ function QueryBuilder({
             }
           )
         ] }),
-        isCollapsed ? /* @__PURE__ */ jsxs5("span", { className: "qt-qb-summary qt-truncate", title: collapsedSummary, children: [
-          /* @__PURE__ */ jsx5("span", { className: "qt-qb-summary-kw", children: "WHERE" }),
+        isCollapsed ? /* @__PURE__ */ jsxs6("span", { className: "qt-qb-summary qt-truncate", title: collapsedSummary, children: [
+          /* @__PURE__ */ jsx6("span", { className: "qt-qb-summary-kw", children: "WHERE" }),
           " ",
-          /* @__PURE__ */ jsx5("strong", { children: collapsedWhereText }),
+          /* @__PURE__ */ jsx6("strong", { children: collapsedWhereText }),
           " ",
-          /* @__PURE__ */ jsx5("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
+          /* @__PURE__ */ jsx6("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
           " ",
-          /* @__PURE__ */ jsx5("strong", { children: collapsedOrderText })
+          /* @__PURE__ */ jsx6("strong", { children: collapsedOrderText })
         ] }) : null
       ] }),
-      showUpdateButton ? /* @__PURE__ */ jsx5(
+      showUpdateButton ? /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1606,11 +2616,22 @@ function QueryBuilder({
           children: `Update Query '${lastSavedQuery?.name ?? "query"}'`
         }
       ) : null,
-      /* @__PURE__ */ jsxs5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: () => setShowSaved(true), children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: cx3("qt-btn", classNames?.button),
+          onClick: () => void shareQuery(),
+          title: "Copy a URL for this query",
+          "aria-live": "polite",
+          children: shareCopied ? "Copied!" : "Share"
+        }
+      ),
+      /* @__PURE__ */ jsxs6("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: () => setShowSaved(true), children: [
         "Saved",
         api.saved.items.length > 0 ? ` (${api.saved.items.length})` : ""
       ] }),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           type: "button",
@@ -1620,7 +2641,7 @@ function QueryBuilder({
           "aria-controls": bodyId,
           title: isCollapsed ? "Expand query builder" : "Collapse query builder",
           children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "span",
               {
                 className: cx3("qt-qb-collapse-caret", isCollapsed && "qt-qb-collapse-caret--collapsed"),
@@ -1628,38 +2649,38 @@ function QueryBuilder({
                 children: "\u25BE"
               }
             ),
-            /* @__PURE__ */ jsx5("span", { className: "qt-sr-only", children: isCollapsed ? "Expand query builder" : "Collapse query builder" })
+            /* @__PURE__ */ jsx6("span", { className: "qt-sr-only", children: isCollapsed ? "Expand query builder" : "Collapse query builder" })
           ]
         }
       )
     ] }),
-    !isCollapsed ? /* @__PURE__ */ jsxs5("div", { className: "qt-qb-bar qt-qb-editor-bar", children: [
-      /* @__PURE__ */ jsxs5("div", { id: bodyId, className: "qt-qb-body", children: [
-        /* @__PURE__ */ jsx5(SelectRow, { api, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(WhereRow, { api, byName, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(OrderRow, { api, fields, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(WindowRow, { api, classNames, disabled: isBusy }),
-        /* @__PURE__ */ jsx5(MetricsRow, { api, fields, classNames, disabled: isBusy })
+    !isCollapsed ? /* @__PURE__ */ 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 })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "qt-qb-editor-stack", children: [
-        /* @__PURE__ */ jsx5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.undo, disabled: !api.canUndo || isBusy, children: "\u21B6 Undo" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.redo, disabled: !api.canRedo || isBusy, children: "\u21B7 Redo" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: api.resetAll, disabled: isBusy, children: "Reset All" })
+      /* @__PURE__ */ 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" })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs5("div", { className: "qt-qb-bar qt-qb-run-bar qt-qb-row", children: [
-      /* @__PURE__ */ jsx5("span", { className: "qt-qb-run-metric qt-qb-run-metric--strong", children: api.loading ? "loading\u2026" : `${rowSummary} rows` }),
-      /* @__PURE__ */ jsxs5("span", { className: "qt-qb-run-metric", children: [
+    /* @__PURE__ */ 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: [
         "Last updated ",
         lastUpdatedText
       ] }),
-      failureText ? /* @__PURE__ */ jsx5("span", { className: "qt-qb-run-error", children: failureText }) : null,
-      /* @__PURE__ */ jsxs5("span", { className: "qt-qb-run-actions", children: [
-        autoRefreshStatus ? /* @__PURE__ */ jsx5("span", { className: "qt-qb-auto-status", children: `Every ${formatDuration2(autoRefreshStatus.frequencyMs)}; clear after ${formatDuration2(
+      failureText ? /* @__PURE__ */ 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(
           autoRefreshStatus.turnOffAfterMs
         )} (${autoRefreshStatus.pollCount} polls run)` }) : null,
-        /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1670,7 +2691,7 @@ function QueryBuilder({
               children: autoRefreshButtonText
             }
           ),
-          showAutoRefresh ? /* @__PURE__ */ jsxs5(
+          showAutoRefresh ? /* @__PURE__ */ jsxs6(
             "span",
             {
               ref: autoRefreshPopoverRef,
@@ -1678,27 +2699,27 @@ function QueryBuilder({
               role: "dialog",
               "aria-label": "Auto-refresh settings",
               children: [
-                /* @__PURE__ */ jsxs5("label", { className: "qt-auto-refresh-field", children: [
-                  /* @__PURE__ */ jsx5("span", { children: "Frequency" }),
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs6("label", { className: "qt-auto-refresh-field", children: [
+                  /* @__PURE__ */ jsx6("span", { children: "Frequency" }),
+                  /* @__PURE__ */ jsx6(
                     "select",
                     {
                       className: "qt-auto-refresh-select",
                       value: autoRefreshFrequencyMs,
                       onChange: (e) => setAutoRefreshFrequencyMs(Number(e.target.value)),
-                      children: AUTO_REFRESH_FREQUENCIES.map((option) => /* @__PURE__ */ jsx5("option", { value: option.value, children: option.label }, option.value))
+                      children: AUTO_REFRESH_FREQUENCIES.map((option) => /* @__PURE__ */ jsx6("option", { value: option.value, children: option.label }, option.value))
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs5("label", { className: "qt-auto-refresh-field", children: [
-                  /* @__PURE__ */ jsx5("span", { children: "Turn off after" }),
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs6("label", { className: "qt-auto-refresh-field", children: [
+                  /* @__PURE__ */ jsx6("span", { children: "Turn off after" }),
+                  /* @__PURE__ */ jsx6(
                     "select",
                     {
                       className: "qt-auto-refresh-select",
                       value: autoRefreshTurnOffAfterMs,
                       onChange: (e) => setAutoRefreshTurnOffAfterMs(Number(e.target.value)),
-                      children: AUTO_REFRESH_TURN_OFF_AFTER.map((option) => /* @__PURE__ */ jsx5(
+                      children: AUTO_REFRESH_TURN_OFF_AFTER.map((option) => /* @__PURE__ */ jsx6(
                         "option",
                         {
                           value: option.value,
@@ -1710,8 +2731,8 @@ function QueryBuilder({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx5("span", { className: cx3("qt-auto-refresh-status", !canSubmitAutoRefresh && "qt-auto-refresh-status--error"), children: canSubmitAutoRefresh ? `${selectedAutoRefreshPolls} polls maximum` : `Choose between 1 and 1000 polls` }),
-                autoRefreshStatus ? /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh-status", children: [
+                /* @__PURE__ */ 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: [
                   "Active: every ",
                   formatDuration2(autoRefreshStatus.frequencyMs),
                   ", clears after",
@@ -1721,8 +2742,8 @@ function QueryBuilder({
                   autoRefreshStatus.pollCount,
                   " polls run."
                 ] }) : null,
-                /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh-actions", children: [
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs6("span", { className: "qt-auto-refresh-actions", children: [
+                  /* @__PURE__ */ jsx6(
                     "button",
                     {
                       type: "button",
@@ -1732,7 +2753,7 @@ function QueryBuilder({
                       children: autoRefreshStatus ? "Update" : "Start"
                     }
                   ),
-                  autoRefreshStatus ? /* @__PURE__ */ jsx5(
+                  autoRefreshStatus ? /* @__PURE__ */ jsx6(
                     "button",
                     {
                       type: "button",
@@ -1749,7 +2770,7 @@ function QueryBuilder({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1761,7 +2782,42 @@ function QueryBuilder({
         )
       ] })
     ] }),
-    !isCollapsed && showSaved ? /* @__PURE__ */ jsx5(SavedQueriesModal, { saved: api.saved, onClose: () => setShowSaved(false), onLoad: setLastSavedId }) : null
+    !isCollapsed && showSaved ? /* @__PURE__ */ jsx6(SavedQueriesModal, { saved: api.saved, onClose: () => setShowSaved(false), onLoad: setLastSavedId }) : null
+  ] });
+}
+function MoveButtons({
+  label,
+  position,
+  count,
+  disabled,
+  onMove
+}) {
+  if (count < 2) return null;
+  return /* @__PURE__ */ jsxs6("span", { className: "qt-chip-move-buttons", children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "qt-chip-move",
+        disabled: disabled || position === 0,
+        onClick: () => onMove(position - 1),
+        "aria-label": `Move ${label} earlier`,
+        title: "Move earlier",
+        children: "\u2190"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "qt-chip-move",
+        disabled: disabled || position === count - 1,
+        onClick: () => onMove(position + 1),
+        "aria-label": `Move ${label} later`,
+        title: "Move later",
+        children: "\u2192"
+      }
+    )
   ] });
 }
 function SelectRow({
@@ -1771,19 +2827,22 @@ function SelectRow({
   disabled
 }) {
   const { select, columnDrag } = api;
-  const [adding, setAdding] = useState4(false);
-  const fieldLabelByName = useMemo3(() => new Map(select.fields.map((f) => [f.name, f.label])), [select.fields]);
+  const [editingColumns, setEditingColumns] = useState5(false);
+  const [adding, setAdding] = useState5(false);
+  const fieldLabelByName = useMemo4(() => new Map(select.fields.map((f) => [f.name, f.label])), [select.fields]);
   function reorderByIndex(from, overIndex) {
     select.move(from, overIndex);
   }
   const fieldNames = select.visible.map((c) => c.field);
   const dragSource = columnDrag.source;
   const rendered = columnDrag.preview(fieldNames);
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "select" }),
-    rendered.map((name) => {
+  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) }),
+    rendered.map((name, position) => {
       const label = fieldLabelByName.get(name) ?? name;
-      return /* @__PURE__ */ jsxs5(
+      return /* @__PURE__ */ jsxs6(
         "span",
         {
           className: cx3(
@@ -1822,25 +2881,35 @@ function SelectRow({
           onDragEnd: () => columnDrag.end(),
           title: "drag to reorder",
           children: [
-            /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-            /* @__PURE__ */ jsx5("span", { className: "qt-chip-field", children: label }),
-            /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => select.hide(name), disabled, children: "\u2715" })
+            /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
+            /* @__PURE__ */ jsx6("span", { className: "qt-chip-field", children: label }),
+            /* @__PURE__ */ jsx6(
+              MoveButtons,
+              {
+                label,
+                position,
+                count: rendered.length,
+                disabled,
+                onMove: (nextPosition) => select.move(name, nextPosition)
+              }
+            ),
+            /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-chip-x", onClick: () => select.hide(name), disabled, children: "\u2715" })
           ]
         },
         name
       );
     }),
-    adding ? /* @__PURE__ */ jsx5(
+    adding ? /* @__PURE__ */ jsx6(
       FieldPicker,
       {
-        fields: select.hidden.filter(isSelectable),
+        fields: select.hidden.filter(isSelectable2),
         onPick: (f) => {
           select.show(f.name);
           setAdding(false);
         },
         onClose: () => setAdding(false)
       }
-    ) : /* @__PURE__ */ jsx5(
+    ) : /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -1850,9 +2919,16 @@ function SelectRow({
         children: "+ add column"
       }
     ),
-    api.query.select.length > 0 && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: select.reset, disabled, title: "Reset to default columns", children: "reset" })
+    api.query.select.length > 0 && /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-link-btn", onClick: select.reset, disabled, title: "Reset to default columns", children: "reset" })
   ] });
 }
+function dropModeFor(e) {
+  const rect = e.currentTarget.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  if (x < rect.width * 0.3) return "before";
+  if (x > rect.width * 0.7) return "after";
+  return "merge";
+}
 function WhereRow({
   api,
   byName,
@@ -1860,120 +2936,295 @@ function WhereRow({
   classNames,
   disabled
 }) {
-  const [adding, setAdding] = useState4(false);
+  const [adding, setAdding] = useState5(false);
+  const [drag, setDrag] = useState5(null);
+  const where = api.query.where;
+  const hasOr = where.some(isOrGroup);
   function addClause(f) {
-    const op = opsForField2(f)[0] ?? "=";
+    const op = positiveOpsForField(f)[0] ?? opsForField2(f)[0] ?? "=";
     api.addFilter({ field: f.name, op, value: "" });
     setAdding(false);
   }
-  const groupedWhere = useMemo3(() => {
-    const groups = /* @__PURE__ */ new Map();
-    const order = [];
-    api.query.where.forEach((c, i) => {
-      if (!groups.has(c.field)) order.push(c.field);
-      const group = groups.get(c.field) ?? { field: c.field, clauses: [] };
-      group.clauses.push({ clause: c, index: i });
-      groups.set(c.field, group);
-    });
-    return order.map((fieldName) => groups.get(fieldName));
-  }, [api.query.where]);
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "where" }),
-    api.query.where.length === 0 && !adding && /* @__PURE__ */ jsx5("span", { className: "qt-qb-hint", children: "all rows" }),
-    groupedWhere.map((g) => /* @__PURE__ */ jsx5(
-      ClauseChip,
-      {
-        api,
-        field: byName.get(g.field),
-        clauses: g.clauses,
-        classNames,
-        disabled,
-        onChange: (index, next) => api.updateFilter(index, next),
-        onRemove: (index) => api.removeFilter(index)
-      },
-      g.field
-    )),
-    adding ? /* @__PURE__ */ jsx5(
+  function handleOver(e, index) {
+    if (!drag) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const mode = dropModeFor(e);
+    setDrag((d) => d && (d.over?.index !== index || d.over?.mode !== mode) ? { from: d.from, over: { index, mode } } : d);
+  }
+  function handleDrop() {
+    if (!drag || !drag.over) {
+      setDrag(null);
+      return;
+    }
+    const { from } = drag;
+    const { index: target, mode } = drag.over;
+    if (mode === "merge") {
+      if (target !== from) api.mergeFilters(from, target);
+    } else {
+      const tPrime = target < from ? target : target - 1;
+      const insertAt = mode === "after" ? tPrime + 1 : tPrime;
+      if (insertAt !== from) api.reorderFilters(from, insertAt);
+    }
+    setDrag(null);
+  }
+  return /* @__PURE__ */ 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(
+        TermChip,
+        {
+          api,
+          term,
+          index,
+          byName,
+          classNames,
+          disabled,
+          isDragSource: drag?.from === index,
+          dropHint: drag?.over?.index === index ? drag.over.mode : null,
+          onDragStart: () => setDrag({ from: index, over: null }),
+          onDragOver: (e) => handleOver(e, index),
+          onDrop: handleDrop,
+          onDragEnd: () => setDrag(null)
+        }
+      )
+    ] }, index)),
+    adding ? /* @__PURE__ */ jsx6(
       FieldPicker,
       {
-        fields: fields.filter(isFilterable),
+        fields: fields.filter(isFilterable2),
         gateOnDistinct: true,
         onPick: addClause,
         onClose: () => setAdding(false)
       }
-    ) : /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add filter" }),
-    api.query.where.length > 0 && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: api.clearFilters, disabled, title: "Reset filters", children: "reset" })
+    ) : /* @__PURE__ */ 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" })
   ] });
 }
-function ClauseChip({
+function TermChip({
   api,
-  field,
-  clauses,
+  term,
+  index,
+  byName,
   classNames,
   disabled,
-  onChange,
-  onRemove
+  isDragSource,
+  dropHint,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
 }) {
-  const labelField = field?.label;
-  const fieldName = clauses[0]?.clause.field;
-  const fieldHasNull = useFieldHasNull(api, field?.name);
-  return /* @__PURE__ */ jsxs5("span", { className: cx3("qt-chip", "qt-chip--where", classNames?.chip), children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-chip-field", children: labelField ?? fieldName }),
-    /* @__PURE__ */ jsx5("span", { className: "qt-chip-where-list", children: clauses.map((entry, idx) => {
-      const clause = entry.clause;
-      const baseOps = field ? opsForField2(field) : [clause.op];
-      const filteredBaseOps = fieldHasNull === false ? baseOps.filter((op) => !NULLARY_OPS2.has(op)) : baseOps;
-      const clauseOps = filteredBaseOps.includes(clause.op) ? filteredBaseOps : [...filteredBaseOps, clause.op];
-      const needsValue = !NULLARY_OPS2.has(clause.op);
-      return /* @__PURE__ */ jsxs5("span", { className: "qt-chip-where-clause", children: [
-        idx > 0 && /* @__PURE__ */ jsx5("span", { className: "qt-chip-and", children: "and" }),
-        /* @__PURE__ */ jsx5(
-          "select",
+  const group = isOrGroup(term);
+  const predicates = predicatesOf(term);
+  const grip = /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: "qt-chip-grip",
+      "aria-hidden": true,
+      draggable: !disabled,
+      onDragStart: (e) => {
+        onDragStart();
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", String(index));
+      },
+      onDragEnd,
+      title: "drag to reorder, or drop onto another filter to make an OR",
+      children: "\u22EE\u22EE"
+    }
+  );
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      className: cx3(
+        "qt-chip",
+        "qt-chip--where",
+        group && "qt-chip--or",
+        isDragSource && "qt-chip--dragging",
+        dropHint ? `qt-chip--drop-${dropHint}` : void 0,
+        classNames?.chip
+      ),
+      onDragOver,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop();
+      },
+      children: [
+        grip,
+        group ? /* @__PURE__ */ 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(
+            PredicateEditor,
+            {
+              api,
+              field: byName.get(clause.field),
+              clause,
+              classNames,
+              disabled,
+              onChange: (next) => api.updatePredicate(index, predIndex, next),
+              onRemove: () => api.removePredicate(index, predIndex)
+            }
+          )
+        ] }, predIndex)) }) : /* @__PURE__ */ jsx6(
+          PredicateEditor,
           {
-            className: cx3("qt-chip-op", classNames?.select),
-            value: clause.op,
+            api,
+            field: byName.get(term.field),
+            clause: term,
+            classNames,
             disabled,
-            style: { width: `${chipFieldWidthForSelect(clause.op, 3)}ch` },
-            onChange: (e) => onChange(entry.index, { ...clause, op: e.target.value }),
-            children: clauseOps.map((op) => /* @__PURE__ */ jsx5("option", { value: op, children: op }, op))
+            onChange: (next) => api.updatePredicate(index, 0, next),
+            onRemove: () => api.removeFilter(index)
           }
-        ),
-        needsValue && /* @__PURE__ */ jsx5(
-          ValueInput,
+        )
+      ]
+    }
+  );
+}
+var OP_LABEL = {
+  "=": "=",
+  "!=": "\u2260",
+  ">": ">",
+  ">=": "\u2265",
+  "<": "<",
+  "<=": "\u2264",
+  contains: "contains",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  matches_regex: "matches",
+  not_matches_regex: "not matches",
+  includes: "includes",
+  is_null: "is null",
+  is_not_null: "is not null"
+};
+function choiceLabel(op, negated) {
+  return negated ? `not ${OP_LABEL[op]}` : OP_LABEL[op];
+}
+function OpPicker({
+  field,
+  clause,
+  disabled,
+  classNames,
+  onPick
+}) {
+  const [open, setOpen] = useState5(false);
+  const wrapRef = useRef3(null);
+  useEffect5(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    const t = setTimeout(() => window.addEventListener("click", onDocClick), 0);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      clearTimeout(t);
+      window.removeEventListener("click", onDocClick);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const pairs = useMemo4(() => field ? opPairsForField2(field) : [], [field]);
+  const isActive = (choice) => choice.op === clause.op && Boolean(choice.negated) === Boolean(clause.negated);
+  return /* @__PURE__ */ jsxs6("span", { className: "qt-op-picker", ref: wrapRef, children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        className: cx3("qt-chip-op-btn", "qt-op-trigger", classNames?.select),
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          choiceLabel(clause.op, Boolean(clause.negated)),
+          /* @__PURE__ */ jsx6("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(
+          "button",
           {
-            api,
-            field,
-            value: clause.value,
-            classNames,
-            onChange: (v) => onChange(entry.index, { ...clause, value: v })
+            type: "button",
+            className: cx3("qt-op-cell", isActive(pair.keep) && "qt-op-cell--on"),
+            onClick: () => {
+              onPick(pair.keep);
+              setOpen(false);
+            },
+            children: choiceLabel(pair.keep.op, pair.keep.negated)
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
-            className: "qt-chip-x",
-            onClick: () => onRemove(entry.index),
-            disabled,
-            children: "\u2715"
+            className: cx3("qt-op-cell", "qt-op-cell--neg", isActive(pair.exclude) && "qt-op-cell--on"),
+            onClick: () => {
+              onPick(pair.exclude);
+              setOpen(false);
+            },
+            children: choiceLabel(pair.exclude.op, pair.exclude.negated)
           }
         )
-      ] }, entry.index);
-    }) })
+      ] }, i))
+    ] })
+  ] });
+}
+function PredicateEditor({
+  api,
+  field,
+  clause,
+  classNames,
+  disabled,
+  onChange,
+  onRemove
+}) {
+  const needsValue = !NULLARY_OPS2.has(clause.op);
+  const isRegex = clause.op === "matches_regex" || clause.op === "not_matches_regex";
+  function pickOp(choice) {
+    const next = { field: clause.field, op: choice.op, value: clause.value };
+    if (choice.negated) next.negated = true;
+    onChange(next);
+  }
+  return /* @__PURE__ */ 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(
+      ValueInput,
+      {
+        api,
+        field,
+        value: clause.value,
+        forceFreeform: isRegex,
+        placeholder: isRegex ? "regex" : "value",
+        classNames,
+        onChange: (v) => onChange({ ...clause, value: v })
+      }
+    ),
+    /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, children: "\u2715" })
   ] });
 }
 function ValueInput({
   api,
   field,
   value,
+  forceFreeform,
+  placeholder = "value",
   classNames,
   onChange
 }) {
   const strategy = field ? filterValuesFor(field) : { source: "freeform" };
-  if (strategy.source === "static") {
+  if (!forceFreeform && strategy.source === "static") {
     const selectedText = value || "\u2014";
     const widthChars = chipFieldWidthForSelect(selectedText, 4);
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "select",
       {
         className: cx3("qt-chip-val", classNames?.select),
@@ -1981,27 +3232,27 @@ function ValueInput({
         style: { width: `${widthChars}ch` },
         onChange: (e) => onChange(e.target.value),
         children: [
-          /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }),
-          strategy.options.map((o) => /* @__PURE__ */ jsx5("option", { value: o, children: o }, o))
+          /* @__PURE__ */ jsx6("option", { value: "", children: "\u2014" }),
+          strategy.options.map((o) => /* @__PURE__ */ jsx6("option", { value: o, children: o }, o))
         ]
       }
     );
   }
-  if (strategy.source === "freeform" || !field) {
-    const widthChars = chipFieldWidthForInput(value || "value", field?.type, 5, 4);
-    return /* @__PURE__ */ jsx5(
+  if (forceFreeform || strategy.source === "freeform" || !field) {
+    const widthChars = chipFieldWidthForInput(value || placeholder, field?.type, 5, 4);
+    return /* @__PURE__ */ jsx6(
       "input",
       {
         className: cx3("qt-chip-val", classNames?.input),
         value,
-        placeholder: "value",
+        placeholder,
         size: widthChars,
         style: { width: `${widthChars}ch` },
         onChange: (e) => onChange(e.target.value)
       }
     );
   }
-  return /* @__PURE__ */ jsx5(AutocompleteInput, { api, field, value, classNames, onChange });
+  return /* @__PURE__ */ jsx6(AutocompleteInput, { api, field, value, classNames, onChange });
 }
 function AutocompleteInput({
   api,
@@ -2010,9 +3261,9 @@ function AutocompleteInput({
   classNames,
   onChange
 }) {
-  const [result, setResult] = useState4({ values: [], hasMore: false });
-  const listId = useId();
-  useEffect4(() => {
+  const [result, setResult] = useState5({ values: [], hasMore: false });
+  const listId = useId2();
+  useEffect5(() => {
     let cancelled = false;
     const t = setTimeout(() => {
       void api.filterValues(field.name, value).then((r) => {
@@ -2026,8 +3277,8 @@ function AutocompleteInput({
       clearTimeout(t);
     };
   }, [api, field.name, value]);
-  return /* @__PURE__ */ jsxs5("span", { className: "qt-autocomplete", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("span", { className: "qt-autocomplete", children: [
+    /* @__PURE__ */ jsx6(
       "input",
       {
         className: cx3("qt-chip-val", classNames?.input),
@@ -2039,8 +3290,8 @@ function AutocompleteInput({
         onChange: (e) => onChange(e.target.value)
       }
     ),
-    /* @__PURE__ */ jsx5("datalist", { id: listId, children: result.values.map((v) => /* @__PURE__ */ jsx5("option", { value: v }, v)) }),
-    result.hasMore && /* @__PURE__ */ jsx5("span", { className: "qt-autocomplete-hint", children: "keep typing to refine\u2026" })
+    /* @__PURE__ */ 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" })
   ] });
 }
 function OrderTermChip({
@@ -2057,12 +3308,16 @@ function OrderTermChip({
   onDragEnd,
   disabled,
   updateTerm,
+  clearExtract,
   removeTerm,
+  position,
+  count,
+  moveTerm,
   classNames,
   label
 }) {
   const fieldHasNull = useFieldHasNull(api, field?.name);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "span",
     {
       className: cx3("qt-chip", "qt-chip--col", "qt-chip--sort", isDragSource && "qt-chip--dragging", classNames?.chip),
@@ -2080,10 +3335,10 @@ function OrderTermChip({
       onDragEnd,
       title: "drag to reorder sort priority",
       children: [
-        /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-        showPriority && /* @__PURE__ */ jsx5("span", { className: "qt-chip-priority", children: priority }),
-        /* @__PURE__ */ jsx5("span", { className: "qt-chip-field", children: label }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ 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(
           "button",
           {
             type: "button",
@@ -2093,7 +3348,45 @@ function OrderTermChip({
             children: term.dir === "asc" ? "\u2191 asc" : "\u2193 desc"
           }
         ),
-        fieldHasNull !== false && /* @__PURE__ */ jsxs5(
+        term.extract ? /* @__PURE__ */ jsxs6("span", { className: "qt-sort-extract", children: [
+          /* @__PURE__ */ jsx6("span", { className: "qt-chip-and", children: "extract" }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              className: cx3("qt-chip-val", classNames?.input),
+              value: term.extract.regex,
+              placeholder: "regex",
+              "aria-label": `Regex extract for ${label}`,
+              size: chipFieldWidthForInput(term.extract.regex || "regex", "text", 5, 4),
+              style: { width: `${chipFieldWidthForInput(term.extract.regex || "regex", "text", 5, 4)}ch` },
+              disabled,
+              onChange: (e) => updateTerm(dataIndex, { extract: { regex: e.target.value } })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "qt-chip-x",
+              title: "Remove regex extraction",
+              "aria-label": `Remove regex extract for ${label}`,
+              disabled,
+              onClick: () => clearExtract(dataIndex),
+              children: "\u2715"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: "qt-chip-op-btn",
+            title: "Sort by text extracted with a regular expression",
+            disabled,
+            onClick: () => updateTerm(dataIndex, { extract: { regex: "" } }),
+            children: "+ regex extract"
+          }
+        ),
+        (term.extract != null || fieldHasNull !== false) && /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
@@ -2107,7 +3400,17 @@ function OrderTermChip({
             ]
           }
         ),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => removeTerm(dataIndex), disabled, children: "\u2715" })
+        /* @__PURE__ */ jsx6(
+          MoveButtons,
+          {
+            label,
+            position,
+            count,
+            disabled,
+            onMove: moveTerm
+          }
+        ),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-chip-x", onClick: () => removeTerm(dataIndex), disabled, children: "\u2715" })
       ]
     }
   );
@@ -2119,15 +3422,24 @@ function OrderRow({
   disabled
 }) {
   const orderBy = api.query.orderBy;
-  const byName = useMemo3(() => new Map(fields.map((f) => [f.name, f])), [fields]);
-  const [drag, setDrag] = useState4(null);
-  const [adding, setAdding] = useState4(false);
+  const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const [drag, setDrag] = useState5(null);
+  const [adding, setAdding] = useState5(false);
   function setOrderBy(next) {
     api.setSort(next);
   }
   function updateTerm(i, patch) {
     setOrderBy(orderBy.map((o, k) => k === i ? { ...o, ...patch } : o));
   }
+  function clearExtract(i) {
+    setOrderBy(
+      orderBy.map((term, index) => {
+        if (index !== i) return term;
+        const { extract: _extract, ...plainTerm } = term;
+        return plainTerm;
+      })
+    );
+  }
   function removeTerm(i) {
     setOrderBy(orderBy.filter((_, k) => k !== i));
   }
@@ -2153,7 +3465,7 @@ function OrderRow({
     setAdding(false);
   }
   const termFields = orderBy.map((o) => o.field);
-  const termByField = useMemo3(() => new Map(orderBy.map((o) => [o.field, o])), [orderBy]);
+  const termByField = useMemo4(() => new Map(orderBy.map((o) => [o.field, o])), [orderBy]);
   function previewFields() {
     if (!drag) return termFields;
     const without = termFields.filter((f) => f !== drag.source);
@@ -2183,14 +3495,14 @@ function OrderRow({
   const sortable = fields.filter(isSortable2);
   const isDefaultOrderBy = orderBy.length === api.defaults.orderBy.length && orderBy.every((term, i) => {
     const next = api.defaults.orderBy[i];
-    return term.field === next?.field && term.dir === next?.dir && (term.nulls ?? "last") === (next?.nulls ?? "last");
+    return term.field === next?.field && term.dir === next?.dir && (term.nulls ?? "last") === (next?.nulls ?? "last") && (term.extract?.regex ?? null) === (next?.extract?.regex ?? null);
   });
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "order by" }),
-    orderBy.length === 0 && !adding && /* @__PURE__ */ jsx5("span", { className: "qt-qb-hint", children: "(default)" }),
+  return /* @__PURE__ */ 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)" }),
     rendered.map((f, pos) => {
       const term = termByField.get(f);
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         OrderTermChip,
         {
           api,
@@ -2206,15 +3518,26 @@ function OrderRow({
           onDragEnd: () => setDrag(null),
           disabled,
           updateTerm,
+          clearExtract,
           removeTerm,
+          position: pos,
+          count: rendered.length,
+          moveTerm: (toIndex) => {
+            const next = [...orderBy];
+            const fromIndex = next.findIndex((candidate) => candidate.field === f);
+            if (fromIndex === -1) return;
+            const [moved] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, moved);
+            setOrderBy(next);
+          },
           classNames,
           label: byName.get(f)?.label ?? f
         },
         f
       );
     }),
-    adding ? /* @__PURE__ */ jsx5(FieldPicker, { fields: sortable, onPick: addTerm, onClose: () => setAdding(false) }) : /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-add", onClick: () => setAdding(true), disabled, children: "+ add sort" }),
-    !isDefaultOrderBy && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: () => api.setSort(api.defaults.orderBy), disabled, children: "reset" })
+    adding ? /* @__PURE__ */ 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" })
   ] });
 }
 function WindowRow({
@@ -2223,10 +3546,10 @@ function WindowRow({
   disabled
 }) {
   const { query } = api;
-  const [limitDraft, setLimitDraft] = useState4(String(query.limit));
-  const [offsetDraft, setOffsetDraft] = useState4(String(query.offset));
-  useEffect4(() => setLimitDraft(String(query.limit)), [query.limit]);
-  useEffect4(() => setOffsetDraft(String(query.offset)), [query.offset]);
+  const [limitDraft, setLimitDraft] = useState5(String(query.limit));
+  const [offsetDraft, setOffsetDraft] = useState5(String(query.offset));
+  useEffect5(() => setLimitDraft(String(query.limit)), [query.limit]);
+  useEffect5(() => setOffsetDraft(String(query.offset)), [query.offset]);
   const hasLimitDefault = query.limit === api.defaults.limit;
   const hasOffsetDefault = query.offset === api.defaults.offset;
   const hasWindowDefault = hasLimitDefault && hasOffsetDefault;
@@ -2236,36 +3559,40 @@ function WindowRow({
   function commitOffset() {
     api.setOffset(Math.max(0, Number(offsetDraft) || 0));
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row qt-qb-pagination", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "limit" }),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        className: cx3("qt-qb-num", classNames?.input),
-        type: "number",
-        min: 1,
-        value: limitDraft,
-        disabled,
-        onChange: (e) => setLimitDraft(e.target.value),
-        onBlur: commitLimit,
-        onKeyDown: (e) => e.key === "Enter" && commitLimit()
-      }
-    ),
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "offset" }),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        className: cx3("qt-qb-num", classNames?.input),
-        type: "number",
-        min: 0,
-        value: offsetDraft,
-        disabled,
-        onChange: (e) => setOffsetDraft(e.target.value),
-        onBlur: commitOffset,
-        onKeyDown: (e) => e.key === "Enter" && commitOffset()
-      }
-    ),
-    !hasWindowDefault && /* @__PURE__ */ jsx5(
+  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(
+        "input",
+        {
+          className: cx3("qt-qb-num", classNames?.input),
+          type: "number",
+          min: 1,
+          value: limitDraft,
+          disabled,
+          onChange: (e) => setLimitDraft(e.target.value),
+          onBlur: commitLimit,
+          onKeyDown: (e) => e.key === "Enter" && commitLimit()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("label", { className: "qt-qb-window-field", children: [
+      /* @__PURE__ */ jsx6("span", { className: "qt-qb-kw", children: "offset" }),
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          className: cx3("qt-qb-num", classNames?.input),
+          type: "number",
+          min: 0,
+          value: offsetDraft,
+          disabled,
+          onChange: (e) => setOffsetDraft(e.target.value),
+          onBlur: commitOffset,
+          onKeyDown: (e) => e.key === "Enter" && commitOffset()
+        }
+      )
+    ] }),
+    !hasWindowDefault && /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -2298,11 +3625,11 @@ function MetricsRow({
 }) {
   const { aggregations } = api;
   const clauses = aggregations.clauses;
-  const measurable = useMemo3(() => fields.filter(isMeasurable), [fields]);
-  const groupable = useMemo3(() => fields.filter(isGroupable), [fields]);
-  const [drag, setDrag] = useState4(null);
+  const measurable = useMemo4(() => fields.filter(isMeasurable), [fields]);
+  const groupable = useMemo4(() => fields.filter(isGroupable), [fields]);
+  const [drag, setDrag] = useState5(null);
   const ids = clauses.map((c) => c.id);
-  const byId = useMemo3(() => new Map(clauses.map((c) => [c.id, c])), [clauses]);
+  const byId = useMemo4(() => new Map(clauses.map((c) => [c.id, c])), [clauses]);
   function previewIds() {
     if (!drag) return ids;
     const without = ids.filter((i) => i !== drag.source);
@@ -2328,12 +3655,12 @@ function MetricsRow({
     setDrag(null);
   }
   const rendered = previewIds();
-  return /* @__PURE__ */ jsxs5("div", { className: "qt-qb-row qt-qb-row--metrics", children: [
-    /* @__PURE__ */ jsx5("span", { className: "qt-qb-kw", children: "metrics" }),
-    clauses.length === 0 && /* @__PURE__ */ jsx5("span", { className: "qt-qb-hint", children: "none" }),
-    rendered.map((id) => {
+  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" }),
+    rendered.map((id, position) => {
       const clause = byId.get(id);
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         MetricChip,
         {
           clause,
@@ -2350,13 +3677,16 @@ function MetricsRow({
           onChangeField: (field) => aggregations.update(id, { field }),
           onAddGroup: (field) => aggregations.update(id, { groupBy: [...clause.groupBy, field] }),
           onRemoveGroup: (field) => aggregations.update(id, { groupBy: clause.groupBy.filter((g) => g !== field) }),
-          onRemove: () => aggregations.remove(id)
+          onRemove: () => aggregations.remove(id),
+          position,
+          count: rendered.length,
+          onMove: (toIndex) => aggregations.move(id, toIndex)
         },
         id
       );
     }),
-    /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-add", onClick: () => aggregations.add(), disabled, children: "+ add metric" }),
-    clauses.length > 0 && /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-link-btn", onClick: aggregations.clear, disabled, title: "Remove all metrics", children: "reset" })
+    /* @__PURE__ */ 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" })
   ] });
 }
 function changeMetricOp(aggregations, clause, measurable, op) {
@@ -2380,13 +3710,16 @@ function MetricChip({
   onChangeField,
   onAddGroup,
   onRemoveGroup,
-  onRemove
+  onRemove,
+  position,
+  count,
+  onMove
 }) {
-  const [addingGroup, setAddingGroup] = useState4(false);
-  const byName = useMemo3(() => new Map(groupable.map((f) => [f.name, f])), [groupable]);
+  const [addingGroup, setAddingGroup] = useState5(false);
+  const byName = useMemo4(() => new Map(groupable.map((f) => [f.name, f])), [groupable]);
   const needsField = aggOpNeedsField(clause.op);
   const measureOptions = measurable.filter((f) => aggOpsForField(f).includes(clause.op));
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "span",
     {
       className: cx3("qt-chip", "qt-chip--agg", isDragSource && "qt-chip--dragging", classNames?.chip),
@@ -2404,18 +3737,18 @@ function MetricChip({
       onDragEnd,
       title: "drag to reorder metrics",
       children: [
-        /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
+        /* @__PURE__ */ jsx6(
           "select",
           {
             className: cx3("qt-chip-op", classNames?.select),
             value: clause.op,
             disabled,
             onChange: (e) => onChangeOp(e.target.value),
-            children: AGG_OPS.map((op) => /* @__PURE__ */ jsx5("option", { value: op, children: AGG_OP_LABELS[op] }, op))
+            children: AGG_OPS.map((op) => /* @__PURE__ */ jsx6("option", { value: op, children: AGG_OP_LABELS[op] }, op))
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "select",
           {
             className: cx3("qt-chip-val", classNames?.select),
@@ -2423,18 +3756,18 @@ function MetricChip({
             disabled,
             onChange: (e) => onChangeField(e.target.value || void 0),
             children: [
-              !needsField && /* @__PURE__ */ jsx5("option", { value: "", children: "(all rows)" }),
-              needsField && clause.field == null && /* @__PURE__ */ jsx5("option", { value: "", children: "measure\u2026" }),
-              measureOptions.map((f) => /* @__PURE__ */ jsx5("option", { value: f.name, children: f.label }, f.name))
+              !needsField && /* @__PURE__ */ 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))
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "qt-chip-agg-by", children: [
-          clause.groupBy.map((g) => /* @__PURE__ */ jsxs5("span", { className: "qt-chip-agg-group", children: [
-            /* @__PURE__ */ jsx5("span", { className: "qt-chip-agg-group-label", children: byName.get(g)?.label ?? g }),
-            /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => onRemoveGroup(g), disabled, children: "\u2715" })
+        /* @__PURE__ */ 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" })
           ] }, g)),
-          addingGroup ? /* @__PURE__ */ jsx5(
+          addingGroup ? /* @__PURE__ */ jsx6(
             FieldPicker,
             {
               fields: groupable,
@@ -2445,7 +3778,7 @@ function MetricChip({
               },
               onClose: () => setAddingGroup(false)
             }
-          ) : /* @__PURE__ */ jsx5(
+          ) : /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -2457,16 +3790,26 @@ function MetricChip({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, title: "Remove metric", children: "\u2715" })
+        /* @__PURE__ */ jsx6(
+          MoveButtons,
+          {
+            label: clause.label ?? `${AGG_OP_LABELS[clause.op]} metric`,
+            position,
+            count,
+            disabled,
+            onMove
+          }
+        ),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, title: "Remove metric", children: "\u2715" })
       ]
     }
   );
 }
 
 // src/MetricsPanel.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { EMPTY_QUERY } from "@pythia-software/query-table-core";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var cx4 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
 var OP_LABELS = {
   count: "Count",
@@ -2484,18 +3827,18 @@ function MetricsPanel({
   emptyMessage,
   classNames
 }) {
-  const byName = useMemo4(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const byName = useMemo5(() => new Map(fields.map((f) => [f.name, f])), [fields]);
   const { clauses, results, loading, error } = aggregations;
   if (clauses.length === 0) {
-    return emptyMessage ? /* @__PURE__ */ jsx6("div", { className: cx4("qt-metrics", classNames?.root), children: emptyMessage }) : null;
+    return emptyMessage ? /* @__PURE__ */ jsx7("div", { className: cx4("qt-metrics", classNames?.root), children: emptyMessage }) : null;
   }
   const resultById = new Map((results?.metrics ?? []).map((m) => [m.id, m.buckets]));
-  return /* @__PURE__ */ jsxs6("div", { className: cx4("qt-metrics", classNames?.root), children: [
-    error ? /* @__PURE__ */ jsxs6("div", { className: "qt-metrics-error", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cx4("qt-metrics", classNames?.root), children: [
+    error ? /* @__PURE__ */ jsxs7("div", { className: "qt-metrics-error", children: [
       "Metrics failed: ",
       error.message
     ] }) : null,
-    clauses.map((clause) => /* @__PURE__ */ jsx6(
+    clauses.map((clause) => /* @__PURE__ */ jsx7(
       MetricCard,
       {
         clause,
@@ -2519,23 +3862,23 @@ function MetricCard({
 }) {
   const measure = clause.field ? byName.get(clause.field) : void 0;
   const groupLabels = clause.groupBy.map((g) => byName.get(g)?.label ?? g);
-  const decimals = useMemo4(() => cardDecimals(buckets), [buckets]);
+  const decimals = useMemo5(() => cardDecimals(buckets), [buckets]);
   const fmt = (v) => formatMetricValue(v, clause.op, measure, renderers, decimals);
-  return /* @__PURE__ */ jsxs6("div", { className: cx4("qt-metric", `qt-metric--gb${Math.min(clause.groupBy.length, 3)}`, className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "qt-metric-head", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-title", children: metricTitle(clause, measure) }),
-      groupLabels.length > 0 && /* @__PURE__ */ jsxs6("span", { className: "qt-metric-by", children: [
+  return /* @__PURE__ */ 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: [
         "by ",
         groupLabels.join(" \xD7 ")
       ] })
     ] }),
-    loading && buckets.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "qt-metric-loading", children: "\u2026" }) : buckets.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "qt-metric-empty", children: "no data" }) : clause.groupBy.length === 0 ? /* @__PURE__ */ jsx6(BigNumber, { bucket: buckets[0], fmt }) : clause.groupBy.length === 1 ? /* @__PURE__ */ jsx6(BarList, { buckets, fmt }) : clause.groupBy.length === 2 ? /* @__PURE__ */ jsx6(Pivot, { buckets, fmt, rowLabel: groupLabels[0], colLabel: groupLabels[1] }) : /* @__PURE__ */ jsx6(FlatTable, { buckets, fmt, groupLabels, valueLabel: metricTitle(clause, measure) })
+    loading && buckets.length === 0 ? /* @__PURE__ */ 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) })
   ] });
 }
 function BigNumber({ bucket, fmt }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "qt-metric-big", children: [
-    /* @__PURE__ */ jsx6("span", { className: "qt-metric-big-value", children: fmt(bucket.value) }),
-    /* @__PURE__ */ jsxs6("span", { className: "qt-metric-big-sub", children: [
+  return /* @__PURE__ */ 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: [
       bucket.count.toLocaleString(),
       " rows"
     ] })
@@ -2543,12 +3886,12 @@ function BigNumber({ bucket, fmt }) {
 }
 function BarList({ buckets, fmt }) {
   const max = Math.max(...buckets.map((b) => barMagnitude(b)), 0);
-  return /* @__PURE__ */ jsx6("div", { className: "qt-metric-bars", children: buckets.map((b, i) => {
+  return /* @__PURE__ */ jsx7("div", { className: "qt-metric-bars", children: buckets.map((b, i) => {
     const pct = max > 0 ? barMagnitude(b) / max * 100 : 0;
-    return /* @__PURE__ */ jsxs6("div", { className: "qt-metric-bar-row", children: [
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-label", title: keyText(b.keys[0]), children: keyNode(b.keys[0]) }),
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-track", children: /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-fill", style: { width: `${pct}%` } }) }),
-      /* @__PURE__ */ jsx6("span", { className: "qt-metric-bar-value", children: fmt(b.value) })
+    return /* @__PURE__ */ 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) })
     ] }, `${keyText(b.keys[0])}-${i}`);
   }) });
 }
@@ -2562,22 +3905,22 @@ function Pivot({
   const colKeys = distinctKeys(buckets, 1);
   const cell = /* @__PURE__ */ new Map();
   for (const b of buckets) cell.set(`${keyText(b.keys[0])}\0${keyText(b.keys[1])}`, b.value);
-  return /* @__PURE__ */ jsx6("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs6("table", { className: "qt-metric-pivot", children: [
-    /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
-      /* @__PURE__ */ jsx6("th", { className: "qt-metric-pivot-corner", children: /* @__PURE__ */ jsxs6("span", { className: "qt-metric-pivot-axes", children: [
+  return /* @__PURE__ */ 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: [
         rowLabel,
         " ",
-        /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\\" }),
+        /* @__PURE__ */ jsx7("span", { className: "qt-muted", children: "\\" }),
         " ",
         colLabel
       ] }) }),
-      colKeys.map((c) => /* @__PURE__ */ jsx6("th", { className: "qt-metric-pivot-col", children: keyNode(c) }, keyText(c)))
+      colKeys.map((c) => /* @__PURE__ */ jsx7("th", { className: "qt-metric-pivot-col", children: keyNode(c) }, keyText(c)))
     ] }) }),
-    /* @__PURE__ */ jsx6("tbody", { children: rowKeys.map((r) => /* @__PURE__ */ jsxs6("tr", { children: [
-      /* @__PURE__ */ jsx6("th", { className: "qt-metric-pivot-row", children: keyNode(r) }),
+    /* @__PURE__ */ jsx7("tbody", { children: rowKeys.map((r) => /* @__PURE__ */ jsxs7("tr", { children: [
+      /* @__PURE__ */ jsx7("th", { className: "qt-metric-pivot-row", children: keyNode(r) }),
       colKeys.map((c) => {
         const v = cell.get(`${keyText(r)}\0${keyText(c)}`);
-        return /* @__PURE__ */ jsx6("td", { className: "qt-metric-pivot-cell", children: v === void 0 ? /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\xB7" }) : fmt(v) }, keyText(c));
+        return /* @__PURE__ */ jsx7("td", { className: "qt-metric-pivot-cell", children: v === void 0 ? /* @__PURE__ */ jsx7("span", { className: "qt-muted", children: "\xB7" }) : fmt(v) }, keyText(c));
       })
     ] }, keyText(r))) })
   ] }) });
@@ -2586,16 +3929,16 @@ function FlatTable({
   buckets,
   fmt,
   groupLabels,
-  valueLabel
+  valueLabel: valueLabel2
 }) {
-  return /* @__PURE__ */ jsx6("div", { className: "qt-metric-pivot-wrap", children: /* @__PURE__ */ jsxs6("table", { className: "qt-metric-flat", children: [
-    /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
-      groupLabels.map((g) => /* @__PURE__ */ jsx6("th", { children: g }, g)),
-      /* @__PURE__ */ jsx6("th", { className: "qt-metric-flat-value", children: valueLabel })
+  return /* @__PURE__ */ 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 })
     ] }) }),
-    /* @__PURE__ */ jsx6("tbody", { children: buckets.map((b, i) => /* @__PURE__ */ jsxs6("tr", { children: [
-      groupLabels.map((_, j) => /* @__PURE__ */ jsx6("td", { children: keyNode(b.keys[j]) }, j)),
-      /* @__PURE__ */ jsx6("td", { className: "qt-metric-flat-value", children: fmt(b.value) })
+    /* @__PURE__ */ 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) })
     ] }, i)) })
   ] }) });
 }
@@ -2606,7 +3949,7 @@ function metricTitle(clause, measure) {
 }
 var UNIT_RENDER_KEYS = /* @__PURE__ */ new Set(["duration_ms", "byte_size"]);
 function formatMetricValue(value, op, measure, renderers, decimals) {
-  if (value == null) return /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\u2014" });
+  if (value == null) return /* @__PURE__ */ jsx7("span", { className: "qt-muted", children: "\u2014" });
   if (op === "count" || op === "count_distinct") {
     return typeof value === "number" ? formatNumber(value, 0) : String(value);
   }
@@ -2669,21 +4012,21 @@ function keyText(k) {
   return k == null ? NULL_KEY : String(k);
 }
 function keyNode(k) {
-  return k == null ? /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: NULL_KEY }) : String(k);
+  return k == null ? /* @__PURE__ */ jsx7("span", { className: "qt-muted", children: NULL_KEY }) : String(k);
 }
 
 // src/SelectionToolbar.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var cx5 = (...parts) => parts.filter(Boolean).join(" ");
 function SelectionToolbar({ selection, actions, alwaysShow, className }) {
   if (selection.count === 0 && !alwaysShow) return null;
   const selectedIds = [...selection.selected];
-  return /* @__PURE__ */ jsxs7("div", { className: cx5("qt-selection-toolbar", className), role: "toolbar", children: [
-    /* @__PURE__ */ jsxs7("span", { className: "qt-selection-count", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cx5("qt-selection-toolbar", className), role: "toolbar", children: [
+    /* @__PURE__ */ jsxs8("span", { className: "qt-selection-count", children: [
       selection.count,
       " selected"
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -2693,7 +4036,7 @@ function SelectionToolbar({ selection, actions, alwaysShow, className }) {
         children: "clear"
       }
     ),
-    /* @__PURE__ */ jsx7("span", { className: "qt-selection-actions", children: actions(selectedIds) })
+    /* @__PURE__ */ jsx8("span", { className: "qt-selection-actions", children: actions(selectedIds, selection) })
   ] });
 }
 export {
@@ -2703,6 +4046,7 @@ export {
   MetricsPanel,
   QueryBuilder,
   SavedQueriesModal,
+  SelectColumnEditor,
   SelectionToolbar,
   defaultRenderers,
   resolveRenderer,