@pythia-software/query-table-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2711 @@
+// src/renderers.ts
+import { createElement } from "react";
+var EMPTY = "\u2014";
+var muted = (text) => createElement("span", { className: "qt-muted" }, text);
+function isEmpty(v) {
+  return v == null || v === "" || Array.isArray(v) && v.length === 0;
+}
+var SAFE_LINK_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+function safeLinkHref(value) {
+  if (isEmpty(value)) return null;
+  const href = String(value).trim();
+  if (!href) return null;
+  try {
+    const parsed = new URL(href, "https://query-table.invalid/");
+    return SAFE_LINK_PROTOCOLS.has(parsed.protocol) ? href : null;
+  } catch {
+    return null;
+  }
+}
+var defaultRenderers = {
+  // String(value), em-dash for null/empty
+  text({ value }) {
+    if (isEmpty(value)) return muted(EMPTY);
+    return String(value);
+  },
+  // single-line ellipsis (CSS does the truncation; title carries the full text)
+  truncate({ value }) {
+    if (isEmpty(value)) return muted(EMPTY);
+    const s = String(value);
+    return createElement("span", { className: "qt-truncate", title: s }, s);
+  },
+  // locale-grouped number
+  number({ value }) {
+    if (value == null || value === "") return muted(EMPTY);
+    const n = typeof value === "number" ? value : Number(value);
+    if (!Number.isFinite(n)) return muted(EMPTY);
+    return n.toLocaleString();
+  },
+  // ✓ / —
+  bool_check({ value }) {
+    if (value == null) return muted(EMPTY);
+    return value ? "\u2713" : muted(EMPTY);
+  },
+  // ISO clamped to seconds
+  datetime({ value }) {
+    if (isEmpty(value)) return muted(EMPTY);
+    const s = String(value);
+    if (s.startsWith("0001-")) return muted(EMPTY);
+    return s.slice(0, 19).replace("T", " ");
+  },
+  // relative ("5m ago", "yesterday", "Mar 4")
+  datetime_rel({ value }) {
+    if (isEmpty(value)) return muted(EMPTY);
+    const s = String(value);
+    if (s.startsWith("0001-")) return muted(EMPTY);
+    return createElement("span", { title: s.slice(0, 19).replace("T", " ") }, formatRelative(s));
+  },
+  // human duration from a millisecond number
+  duration_ms({ value }) {
+    if (typeof value !== "number" || !Number.isFinite(value)) return muted(EMPTY);
+    return formatDuration(value);
+  },
+  // humanized bytes (B/KB/MB/GB)
+  byte_size({ value }) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return muted(EMPTY);
+    return formatBytes(value);
+  },
+  // string[] as pills
+  tags_pills({ value }) {
+    if (!Array.isArray(value) || value.length === 0) return muted(EMPTY);
+    return createElement(
+      "span",
+      { className: "qt-pills" },
+      value.map((t, i) => createElement("span", { key: `${String(t)}-${i}`, className: "qt-pill" }, String(t)))
+    );
+  },
+  // value as an <a href={value}> when its URL scheme is safe
+  link({ value }) {
+    if (isEmpty(value)) return muted(EMPTY);
+    const label = String(value);
+    const href = safeLinkHref(value);
+    if (!href) return createElement("span", { className: "qt-muted", title: "Unsafe link blocked" }, label);
+    return createElement(
+      "a",
+      { className: "qt-link", href, target: "_blank", rel: "noopener noreferrer", title: href },
+      label
+    );
+  }
+};
+function resolveRenderer(field, registry) {
+  const r = field.render;
+  if (typeof r === "function") {
+    return r;
+  }
+  if (typeof r === "string") {
+    const found = registry[r];
+    if (found) return found;
+  }
+  return registry["text"] ?? defaultRenderers["text"];
+}
+function formatDuration(ms) {
+  if (ms < 0) return String(ms);
+  if (ms < 1) return `${ms.toFixed(2)}ms`;
+  if (ms < 1e3) return `${ms.toFixed(0)}ms`;
+  const totalSec = ms / 1e3;
+  if (totalSec < 60) return `${totalSec.toFixed(1)}s`;
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor(totalSec % 3600 / 60);
+  const s = Math.round(totalSec % 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m ${s}s`;
+}
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+function formatRelative(iso) {
+  const ts = Date.parse(iso);
+  if (!Number.isFinite(ts)) return iso.slice(0, 19);
+  const now = Date.now();
+  const diffSec = Math.round((now - ts) / 1e3);
+  if (Math.abs(diffSec) < 30) return "just now";
+  const past = diffSec >= 0;
+  const abs = Math.abs(diffSec);
+  if (abs < 60) return past ? `${abs}s ago` : `in ${abs}s`;
+  if (abs < 3600) return past ? `${Math.round(abs / 60)}m ago` : `in ${Math.round(abs / 60)}m`;
+  if (abs < 86400) return past ? `${Math.round(abs / 3600)}h ago` : `in ${Math.round(abs / 3600)}h`;
+  const days = Math.round(abs / 86400);
+  if (past && days === 1) return "yesterday";
+  if (days < 7) return past ? `${days}d ago` : `in ${days}d`;
+  const d = new Date(ts);
+  const sameYear = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+  const opts = sameYear ? { month: "short", day: "numeric" } : { month: "short", day: "numeric", year: "2-digit" };
+  return d.toLocaleDateString(void 0, opts);
+}
+
+// src/DataTable.tsx
+import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var cx = (...parts) => parts.filter(Boolean).join(" ");
+var MENU_WIDTH = 240;
+var ROW_HEIGHT = 32;
+var POINTER_OFFSET = 4;
+function CellMenu({ field, value, x, y, onAddFilter, onClose, classNames }) {
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    function onDocClick() {
+      onClose();
+    }
+    window.addEventListener("keydown", onKey);
+    const t = setTimeout(() => window.addEventListener("click", onDocClick), 0);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("click", onDocClick);
+      clearTimeout(t);
+    };
+  }, [onClose]);
+  const ops = opsForField(field);
+  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 });
+    onClose();
+  }
+  const filterItems = [];
+  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 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 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(
+    "div",
+    {
+      className: cx("qt-cell-menu", classNames?.popover),
+      style: { left, top, width: MENU_WIDTH },
+      onClick: (e) => e.stopPropagation(),
+      onContextMenu: (e) => e.preventDefault(),
+      role: "menu",
+      children: items
+    }
+  );
+}
+function MenuItem({
+  children,
+  onClick,
+  classNames
+}) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: cx("qt-cm-item", classNames?.item), onClick, role: "menuitem", children });
+}
+function opSymbol(op) {
+  switch (op) {
+    case "!=":
+      return "\u2260";
+    case ">=":
+      return "\u2265";
+    case "<=":
+      return "\u2264";
+    case "is_null":
+      return "is null";
+    case "is_not_null":
+      return "is not null";
+    default:
+      return op;
+  }
+}
+function valueToString(v) {
+  if (v == null) return "";
+  if (Array.isArray(v)) return v.join(", ");
+  return String(v);
+}
+function previewValue(v) {
+  if (v == null || v === "") return "(empty)";
+  if (Array.isArray(v)) {
+    return v.length === 0 ? "(empty)" : `[${v.length}] ${v.slice(0, 2).join(", ")}${v.length > 2 ? "\u2026" : ""}`;
+  }
+  const s = String(v);
+  return s.length > 50 ? s.slice(0, 50) + "\u2026" : s;
+}
+
+// src/DataTable.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var cx2 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
+var MIN_WIDTH = 1;
+var MIN_SELECTION_WIDTH = 1;
+var MAX_WIDTH = 800;
+var DEFAULT_WIDTH = 120;
+var DEFAULT_SELECTION_WIDTH = 36;
+var AUTOFIT_EXTRA_PX = 16;
+var MENU_WIDTH2 = 240;
+var MENU_ROW_HEIGHT = 32;
+var COPY_FEEDBACK_MS = 900;
+var SELECTION_COLUMN = "__qt_selection__";
+function DataTable(props) {
+  const {
+    fields,
+    rows,
+    query,
+    onQueryChange,
+    renderers,
+    rowId,
+    selection,
+    trailing,
+    trailingLabel,
+    total = null,
+    loading,
+    emptyMessage,
+    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 tableWrapRef = useRef(null);
+  const resizeCommitRef = useRef(null);
+  const resizingFieldRef = useRef(null);
+  const copiedCellTimerRef = useRef(null);
+  const localColumnDrag = useColumnDrag();
+  const columnDrag = props.columnDrag ?? localColumnDrag;
+  useEffect2(() => {
+    return () => {
+      if (copiedCellTimerRef.current) {
+        clearTimeout(copiedCellTimerRef.current);
+        copiedCellTimerRef.current = null;
+      }
+    };
+  }, []);
+  function cellKey(rowIdValue, rowIndex, fieldName) {
+    return rowIdValue == null ? `row:${rowIndex}:${fieldName}` : `id:${rowIdValue}:${fieldName}`;
+  }
+  function isInteractiveTarget(target) {
+    if (!(target instanceof HTMLElement)) return false;
+    const tag = target.tagName;
+    return tag === "A" || tag === "BUTTON" || tag === "INPUT" || tag === "SELECT";
+  }
+  function showCopyFeedback(cellId) {
+    if (copiedCellTimerRef.current) {
+      clearTimeout(copiedCellTimerRef.current);
+      copiedCellTimerRef.current = null;
+    }
+    setCopiedCellKey(cellId);
+    copiedCellTimerRef.current = setTimeout(() => {
+      setCopiedCellKey((current) => current === cellId ? null : current);
+      copiedCellTimerRef.current = null;
+    }, COPY_FEEDBACK_MS);
+  }
+  async function copyCellToClipboard(e, f, rowIdValue, rowIndex, value) {
+    if (isInteractiveTarget(e.target)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setMenu(null);
+    try {
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(valueToString2(value));
+      }
+    } catch {
+    }
+    showCopyFeedback(cellKey(rowIdValue, rowIndex, f.name));
+  }
+  const pageIds = rows.map(rowId).filter((id) => id != null);
+  const headerState = selection ? selection.pageState(pageIds) : "none";
+  const showSel = selection != null;
+  function sortKeyFor(f) {
+    return f.sort?.field ?? f.name;
+  }
+  function applyHeaderSort(f, dir, placement) {
+    if (!isSortable(f)) return;
+    onQueryChange({
+      ...query,
+      offset: 0,
+      orderBy: nextHeaderOrderBy(query.orderBy, sortKeyFor(f), dir, placement)
+    });
+    setMenu(null);
+  }
+  function removeColumn(f) {
+    const explicit = materialize(query.select, fields);
+    const nextSelect = explicit.filter((c) => c.field !== f.name);
+    const nextOrderBy = query.orderBy.filter((s) => s.field !== sortKeyFor(f));
+    if (nextSelect.length === 0) return;
+    onQueryChange({ ...query, select: nextSelect, orderBy: nextOrderBy });
+    setMenu(null);
+  }
+  function sortInfo(f) {
+    const key = sortKeyFor(f);
+    const idx = query.orderBy.findIndex((o) => o.field === key);
+    if (idx === -1) return null;
+    const term = query.orderBy[idx];
+    return { dir: term.dir, priority: query.orderBy.length > 1 ? idx + 1 : null };
+  }
+  function widthFor(name, f) {
+    const col = query.select.find((c) => c.field === name);
+    return col?.width ?? f.select?.width;
+  }
+  function resolvedWidthFor(name, f) {
+    return draftWidths[name] ?? widthFor(name, f);
+  }
+  function resolvedColumnWidthFor(name, f) {
+    if (name === SELECTION_COLUMN) return draftWidths[name] ?? selectionColumnWidth;
+    return f ? resolvedWidthFor(name, f) : draftWidths[name];
+  }
+  function displayColumnWidthFor(name, f) {
+    if (name === SELECTION_COLUMN) return resolvedColumnWidthFor(name) ?? DEFAULT_SELECTION_WIDTH;
+    return f ? resolvedWidthFor(name, f) ?? DEFAULT_WIDTH : DEFAULT_WIDTH;
+  }
+  function clampWidth(width) {
+    return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(width)));
+  }
+  function clampColumnWidth(name, width) {
+    const min = name === SELECTION_COLUMN ? MIN_SELECTION_WIDTH : MIN_WIDTH;
+    return Math.max(min, Math.min(MAX_WIDTH, Math.round(width)));
+  }
+  function commitColumnWidth(name, width) {
+    if (name === SELECTION_COLUMN) {
+      setSelectionColumnWidth(clampColumnWidth(name, width));
+      return;
+    }
+    setWidth(name, width);
+  }
+  function setWidth(name, width) {
+    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 startResize(name, startWidth, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX;
+    const startW = startWidth ?? e.currentTarget.parentElement?.getBoundingClientRect().width ?? DEFAULT_WIDTH;
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    resizeCommitRef.current = null;
+    resizingFieldRef.current = name;
+    setResizingField(name);
+    setDraftWidth(name, clampColumnWidth(name, startW));
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const finish = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      const commit = resizeCommitRef.current;
+      resizeCommitRef.current = null;
+      resizingFieldRef.current = null;
+      setResizingField(null);
+      clearDraftWidth(name);
+      if (commit) commitColumnWidth(commit.name, commit.width);
+    };
+    const onMove = (ev) => {
+      const next = clampColumnWidth(name, startW + (ev.clientX - startX));
+      resizeCommitRef.current = { name, width: next };
+      setDraftWidth(name, next);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+  }
+  function autofitColumn(name) {
+    const wrap = tableWrapRef.current;
+    if (!wrap) return;
+    const selector = `[data-qt-field="${cssAttributeValue(name)}"]`;
+    let width = 0;
+    wrap.querySelectorAll(selector).forEach((el) => {
+      width = Math.max(width, el.scrollWidth);
+    });
+    if (width > 0) setWidth(name, width + AUTOFIT_EXTRA_PX);
+  }
+  function resizeWithKeyboard(name, startWidth, e) {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Enter") return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      autofitColumn(name);
+      return;
+    }
+    const step = e.shiftKey ? 25 : 10;
+    const direction = e.key === "ArrowRight" ? 1 : -1;
+    commitColumnWidth(name, (startWidth ?? DEFAULT_WIDTH) + step * direction);
+  }
+  function reorderByIndex(from, overIndex) {
+    const withoutDragged = tableColumnNames.filter((n) => n !== from);
+    if (withoutDragged.length === tableColumnNames.length) return;
+    const at = Math.max(0, Math.min(overIndex, withoutDragged.length));
+    withoutDragged.splice(at, 0, from);
+    setTableColumnOrder(withoutDragged);
+    const nextFieldOrder = withoutDragged.filter((name) => name !== SELECTION_COLUMN);
+    if (!sameOrder(nextFieldOrder, fieldNames)) {
+      onQueryChange({ ...query, select: reorderSelect(query.select, fields, nextFieldOrder) });
+    }
+  }
+  const fieldByName = useMemo(() => new Map(fields.map((f) => [f.name, f])), [fields]);
+  const fieldNames = useMemo(() => fields.map((f) => f.name), [fields]);
+  const tableColumnNames = useMemo(() => {
+    if (!showSel) return fieldNames;
+    const defaultOrder = [SELECTION_COLUMN, ...fieldNames];
+    const valid = new Set(defaultOrder);
+    const kept = tableColumnOrder.filter((name) => valid.has(name));
+    const missing = defaultOrder.filter((name) => !kept.includes(name));
+    return [...kept, ...missing];
+  }, [fieldNames, showSel, tableColumnOrder]);
+  const dragSource = columnDrag.source;
+  const renderedColumnNames = useMemo(() => columnDrag.preview(tableColumnNames), [columnDrag, tableColumnNames]);
+  function toggleHeader() {
+    if (!selection) return;
+    selection.setPage(pageIds, headerState !== "all");
+  }
+  function openMenu(e, f, row) {
+    if (isInteractiveTarget(e.target)) return;
+    e.preventDefault();
+    setMenu({ kind: "cell", field: f, value: readFieldValue(f, row), x: e.clientX, y: e.clientY });
+  }
+  function openHeaderMenu(e, f) {
+    if (isInteractiveTarget(e.target)) return;
+    e.preventDefault();
+    setMenu({ kind: "header", field: f, x: e.clientX, y: e.clientY });
+  }
+  function onTableWheel(e) {
+    const wrap = tableWrapRef.current;
+    if (!wrap) return;
+    const canScrollHorizontally = wrap.scrollWidth > wrap.clientWidth;
+    if (!canScrollHorizontally) return;
+    const dx = e.deltaX;
+    const dy = e.deltaY;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    const prefersHorizontal = absDx > absDy * 1.25;
+    if (dx === 0 && !e.shiftKey) return;
+    if (dx === 0 && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      wrap.scrollLeft += dy;
+      return;
+    }
+    if (e.shiftKey || prefersHorizontal) {
+      e.preventDefault();
+      e.stopPropagation();
+      wrap.scrollLeft += dx;
+    }
+  }
+  function resizeHandle(name, label, width) {
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: cx2("qt-resize-handle", classNames?.resizeHandle),
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": `Resize ${label} column`,
+        title: "Drag to resize. Press Enter to auto-fit.",
+        tabIndex: 0,
+        onPointerDown: (e) => startResize(name, width, e),
+        onKeyDown: (e) => resizeWithKeyboard(name, width, e),
+        onClick: (e) => e.stopPropagation()
+      }
+    );
+  }
+  const totalCols = fields.length + (showSel ? 1 : 0) + (trailing ? 1 : 0);
+  const tableWidth = renderedColumnNames.reduce((sum, name) => {
+    const f = fieldByName.get(name);
+    return sum + displayColumnWidthFor(name, f);
+  }, trailing ? 40 : 0);
+  const start = query.offset;
+  const end = total != null ? Math.min(start + query.limit, total) : start + rows.length;
+  const canPrev = start > 0;
+  const canNext = total != null ? end < total : rows.length >= query.limit;
+  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}`;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: tableWrapRef,
+        className: cx2(
+          "qt-table-wrap",
+          loading && "qt-table-wrap--loading",
+          !!resizingField && "qt-table-wrap--resizing",
+          classNames?.wrap
+        ),
+        onWheel: onTableWheel,
+        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__ */ 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 (!f) return null;
+                return /* @__PURE__ */ jsx2("col", { 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: [
+              renderedColumnNames.map((name) => {
+                if (name === SELECTION_COLUMN) {
+                  return /* @__PURE__ */ jsxs2(
+                    "th",
+                    {
+                      "data-qt-field": name,
+                      className: cx2(
+                        "qt-th",
+                        "qt-checkbox-cell",
+                        dragSource === name && "qt-th--dragging",
+                        resizingField === name && "qt-th--resizing",
+                        classNames?.th,
+                        classNames?.checkboxCell
+                      ),
+                      draggable: resizingField == null,
+                      onDragStart: (e) => {
+                        if (resizingFieldRef.current) {
+                          e.preventDefault();
+                          return;
+                        }
+                        columnDrag.start(name, tableColumnNames.indexOf(name));
+                        e.dataTransfer.effectAllowed = "move";
+                        e.dataTransfer.setData("text/plain", name);
+                      },
+                      onDragOver: (e) => {
+                        if (!columnDrag.source) return;
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                        if (columnDrag.source !== name) {
+                          const withoutDragged = tableColumnNames.filter((n) => n !== columnDrag.source);
+                          let next = withoutDragged.indexOf(name);
+                          if (next >= 0) {
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            if (e.clientX > rect.left + rect.width / 2) next += 1;
+                            columnDrag.over(next);
+                          }
+                        }
+                      },
+                      onDrop: (e) => {
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                        const from = columnDrag.source || e.dataTransfer.getData("text/plain");
+                        if (from && columnDrag.overIndex != null) reorderByIndex(from, columnDrag.overIndex);
+                        columnDrag.end();
+                      },
+                      onDragEnd: () => columnDrag.end(),
+                      children: [
+                        /* @__PURE__ */ jsx2(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: headerState === "all",
+                            ref: (el) => {
+                              if (el) el.indeterminate = headerState === "some";
+                            },
+                            onChange: toggleHeader,
+                            "aria-label": "select all on page"
+                          }
+                        ),
+                        resizeHandle(name, "selection", resolvedColumnWidthFor(name))
+                      ]
+                    },
+                    name
+                  );
+                }
+                const f = fieldByName.get(name);
+                if (!f) return null;
+                const info = sortInfo(f);
+                const sortable = isSortable(f);
+                return /* @__PURE__ */ jsxs2(
+                  "th",
+                  {
+                    "data-qt-field": f.name,
+                    className: cx2(
+                      "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,
+                    onDragStart: (e) => {
+                      if (resizingFieldRef.current) {
+                        e.preventDefault();
+                        return;
+                      }
+                      columnDrag.start(f.name, tableColumnNames.indexOf(f.name));
+                      e.dataTransfer.effectAllowed = "move";
+                      e.dataTransfer.setData("text/plain", f.name);
+                    },
+                    onDragOver: (e) => {
+                      if (!columnDrag.source) return;
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "move";
+                      if (columnDrag.source !== f.name) {
+                        const withoutDragged = tableColumnNames.filter((n) => n !== columnDrag.source);
+                        let next = withoutDragged.indexOf(f.name);
+                        if (next >= 0) {
+                          const rect = e.currentTarget.getBoundingClientRect();
+                          if (e.clientX > rect.left + rect.width / 2) next += 1;
+                          columnDrag.over(next);
+                        }
+                      }
+                    },
+                    onDrop: (e) => {
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "move";
+                      const from = columnDrag.source || e.dataTransfer.getData("text/plain");
+                      if (from && columnDrag.overIndex != null) reorderByIndex(from, columnDrag.overIndex);
+                      columnDrag.end();
+                    },
+                    onDragEnd: () => columnDrag.end(),
+                    children: [
+                      /* @__PURE__ */ jsxs2(
+                        "span",
+                        {
+                          className: "qt-th-label",
+                          onClick: (e) => openHeaderMenu(e, f),
+                          style: { cursor: "pointer" },
+                          title: "Click to open column actions",
+                          children: [
+                            f.label,
+                            info && /* @__PURE__ */ jsxs2("span", { className: "qt-sort-indicator", children: [
+                              info.dir === "asc" ? " \u2191" : " \u2193",
+                              info.priority != null && /* @__PURE__ */ jsx2("sup", { className: "qt-sort-priority", children: info.priority })
+                            ] })
+                          ]
+                        }
+                      ),
+                      resizeHandle(f.name, f.label, resolvedColumnWidthFor(f.name, f))
+                    ]
+                  },
+                  f.name
+                );
+              }),
+              trailing && /* @__PURE__ */ jsx2("th", { className: cx2("qt-th", classNames?.th), children: trailingLabel ?? "" })
+            ] }) }),
+            /* @__PURE__ */ jsxs2("tbody", { className: classNames?.tbody, children: [
+              rows.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-empty", classNames?.empty), children: emptyMessage ?? "No rows." }) }),
+              rows.map((row, i) => {
+                const id = rowId(row);
+                const selected = id != null && selection ? selection.isSelected(id) : false;
+                return /* @__PURE__ */ jsxs2(
+                  "tr",
+                  {
+                    className: cx2("qt-row", selected && "qt-row--selected", classNames?.row, selected && classNames?.rowSelected),
+                    children: [
+                      renderedColumnNames.map((name) => {
+                        if (name === SELECTION_COLUMN) {
+                          return /* @__PURE__ */ jsx2(
+                            "td",
+                            {
+                              "data-qt-field": name,
+                              className: cx2(
+                                "qt-cell",
+                                "qt-checkbox-cell",
+                                dragSource === name && "qt-cell--dragging",
+                                classNames?.cell,
+                                classNames?.checkboxCell
+                              ),
+                              children: id != null && /* @__PURE__ */ jsx2(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  checked: selected,
+                                  onClick: (e) => selection.toggle(id, e.shiftKey),
+                                  onChange: () => {
+                                  },
+                                  "aria-label": `select row ${String(id)}`
+                                }
+                              )
+                            },
+                            name
+                          );
+                        }
+                        const f = fieldByName.get(name);
+                        if (!f) return null;
+                        const render = resolveRenderer(f, renderers);
+                        const value = readFieldValue(f, row);
+                        const key = cellKey(id, i, f.name);
+                        return /* @__PURE__ */ jsx2(
+                          "td",
+                          {
+                            "data-qt-field": f.name,
+                            className: cx2("qt-cell", dragSource === f.name && "qt-cell--dragging", classNames?.cell),
+                            style: f.select?.align ? { textAlign: f.select.align } : void 0,
+                            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 })
+                          },
+                          f.name
+                        );
+                      }),
+                      trailing && /* @__PURE__ */ jsx2("td", { className: cx2("qt-cell", "qt-trailing-cell", classNames?.cell), children: trailing(row) })
+                    ]
+                  },
+                  id != null ? String(id) : i
+                );
+              })
+            ] }),
+            /* @__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(
+                "button",
+                {
+                  type: "button",
+                  className: cx2("qt-btn", classNames?.summaryButton),
+                  disabled: loading || !canPrev,
+                  onClick: prevPage,
+                  children: "\u2190 prev"
+                }
+              ),
+              /* @__PURE__ */ jsx2("span", { className: cx2("qt-table-summary-hint", classNames?.summaryHint), children: summaryText }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: cx2("qt-btn", classNames?.summaryButton),
+                  disabled: loading || !canNext,
+                  onClick: nextPage,
+                  children: "next \u2192"
+                }
+              )
+            ] }) }) }) })
+          ] })
+        ]
+      }
+    ),
+    menu && (menu.kind === "cell" ? /* @__PURE__ */ jsx2(
+      CellMenu,
+      {
+        field: menu.field,
+        value: menu.value,
+        x: menu.x,
+        y: menu.y,
+        onAddFilter: (clause) => onQueryChange((prev) => ({ ...prev, offset: 0, where: [...prev.where, clause] })),
+        onClose: () => setMenu(null)
+      }
+    ) : /* @__PURE__ */ jsx2(
+      HeaderMenu,
+      {
+        field: menu.field,
+        x: menu.x,
+        y: menu.y,
+        sortable: isSortable(menu.field),
+        canRemoveColumn: fields.length > 1,
+        onSetSort: (placement, dir) => applyHeaderSort(menu.field, dir, placement),
+        onRemove: () => removeColumn(menu.field),
+        onClose: () => setMenu(null)
+      }
+    ))
+  ] });
+}
+function HeaderMenu({
+  field,
+  x,
+  y,
+  sortable,
+  canRemoveColumn,
+  onSetSort,
+  onRemove,
+  onClose
+}) {
+  useEffect2(() => {
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    function onDocClick() {
+      onClose();
+    }
+    window.addEventListener("keydown", onKey);
+    const t = setTimeout(() => window.addEventListener("click", onDocClick), 0);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("click", onDocClick);
+      clearTimeout(t);
+    };
+  }, [onClose]);
+  const items = [];
+  const addSortItem = (placement, dir, label) => items.push(
+    /* @__PURE__ */ jsx2(MenuItem2, { disabled: !sortable, onClick: () => onSetSort(placement, dir), children: label }, `${placement}-${dir}`)
+  );
+  addSortItem("set", "asc", "Set Sort (Asc)");
+  addSortItem("set", "desc", "Set Sort (Desc)");
+  addSortItem("append", "asc", "Append Sort (Asc)");
+  addSortItem("append", "desc", "Append Sort (Desc)");
+  addSortItem("prepend", "asc", "Prepend Sort (Asc)");
+  addSortItem("prepend", "desc", "Prepend Sort (Desc)");
+  items.push(/* @__PURE__ */ jsx2("div", { className: "qt-cm-sep" }, "sep"));
+  items.push(
+    /* @__PURE__ */ jsx2(MenuItem2, { disabled: !canRemoveColumn, onClick: onRemove, children: "Remove Column" }, "remove")
+  );
+  const vw = typeof window !== "undefined" ? window.innerWidth : 9999;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 9999;
+  const left = Math.max(8, Math.min(x, vw - MENU_WIDTH2 - 8));
+  const top = Math.max(8, Math.min(y, vh - MENU_ROW_HEIGHT * items.length - 8));
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "qt-cell-menu",
+      style: { left, top, width: MENU_WIDTH2 },
+      onClick: (e) => e.stopPropagation(),
+      onContextMenu: (e) => e.preventDefault(),
+      role: "menu",
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "qt-cm-header", children: /* @__PURE__ */ jsx2("span", { className: "qt-cm-field", children: field.label }) }),
+        items
+      ]
+    }
+  );
+}
+function MenuItem2({
+  children,
+  onClick,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className: "qt-cm-item",
+      onClick,
+      role: "menuitem",
+      disabled,
+      children
+    }
+  );
+}
+function nextHeaderOrderBy(existing, field, dir, placement) {
+  const next = existing.filter((s) => s.field !== field);
+  if (placement === "set") return [{ field, dir }];
+  if (placement === "append") return [...next, { field, dir }];
+  return [{ field, dir }, ...next];
+}
+function materialize(select, fields) {
+  if (select.length) return select.map((c) => ({ ...c }));
+  return fields.map((f) => ({ field: f.name }));
+}
+function writeWidth(select, fields, name, width) {
+  const cols = materialize(select, fields);
+  let found = false;
+  const next = cols.map((c) => {
+    if (c.field !== name) return c;
+    found = true;
+    return { ...c, width };
+  });
+  if (!found) next.push({ field: name, width });
+  return next;
+}
+function reorderSelect(select, fields, order) {
+  const cols = materialize(select, fields);
+  const byName = new Map(cols.map((c) => [c.field, c]));
+  return order.map((name) => byName.get(name) ?? { field: name });
+}
+function cssAttributeValue(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function sameOrder(a, b) {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+function valueToString2(value) {
+  if (value == null) return "";
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+}
+
+// src/QueryBuilder.tsx
+import { useEffect as useEffect4, useId, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import {
+  NULLARY_OPS as NULLARY_OPS2,
+  aggOpNeedsField,
+  aggOpsForField,
+  filterValues as filterValuesFor,
+  isGroupable,
+  isMeasurable,
+  queriesEqual,
+  isFilterable,
+  isSelectable,
+  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";
+var UNGROUPED = "other";
+function FieldPicker({
+  fields,
+  excluded,
+  stats,
+  gateOnDistinct,
+  onPick,
+  onClose
+}) {
+  const [search, setSearch] = useState3("");
+  const needle = search.trim().toLowerCase();
+  const excludedSet = useMemo2(() => new Set(excluded ?? []), [excluded]);
+  const matched = useMemo2(
+    () => fields.filter((f) => {
+      if (excludedSet.has(f.name)) return false;
+      if (!needle) return true;
+      return f.label.toLowerCase().includes(needle) || f.name.toLowerCase().includes(needle) || fieldAliases(f).some((a) => a.toLowerCase().includes(needle));
+    }),
+    [fields, excludedSet, needle]
+  );
+  const grouped = useMemo2(() => groupByGroup(matched), [matched]);
+  const firstEnabled = matched.find((f) => isEnabled(f, stats, gateOnDistinct));
+  return /* @__PURE__ */ jsxs3("div", { className: "qt-picker", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        autoFocus: true,
+        type: "text",
+        className: "qt-picker-input",
+        placeholder: "search fields\u2026",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Escape") onClose?.();
+          if (e.key === "Enter" && firstEnabled) {
+            onPick(firstEnabled);
+            setSearch("");
+          }
+        },
+        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 }),
+      fs.map((f) => {
+        const enabled = isEnabled(f, stats, gateOnDistinct);
+        const s = stats?.[f.name];
+        const aliasHit = aliasMatch(f, needle);
+        return /* @__PURE__ */ jsxs3(
+          "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) => {
+              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 })
+              ] }),
+              aliasHit && /* @__PURE__ */ jsxs3("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.distinct,
+                  " distinct"
+                ] }),
+                s.min != null && s.max != null && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                  " ",
+                  "\xB7 ",
+                  fmtStat(s.min),
+                  "\u2026",
+                  fmtStat(s.max)
+                ] })
+              ] })
+            ]
+          },
+          f.name
+        );
+      })
+    ] }, group)) })
+  ] });
+}
+function isEnabled(f, stats, gate) {
+  if (!gate) return true;
+  const s = stats?.[f.name];
+  if (!s || s.distinct == null) return true;
+  return s.distinct > 1;
+}
+function aliasMatch(f, needle) {
+  if (!needle) return void 0;
+  if (f.label.toLowerCase().includes(needle) || f.name.toLowerCase().includes(needle)) return void 0;
+  return fieldAliases(f).find((a) => a.toLowerCase().includes(needle));
+}
+function fieldAliases(f) {
+  const aliases = /* @__PURE__ */ new Set();
+  if (f.alias) aliases.add(f.alias);
+  if (f.aliases) {
+    for (const alias of f.aliases) aliases.add(alias);
+  }
+  return [...aliases];
+}
+function groupByGroup(fs) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const f of fs) {
+    const key = f.group ?? UNGROUPED;
+    const arr = groups.get(key);
+    if (arr) arr.push(f);
+    else groups.set(key, [f]);
+  }
+  return [...groups.entries()];
+}
+function fmtStat(v) {
+  if (typeof v === "number") return v.toLocaleString();
+  const s = String(v);
+  if (/^\d{4}-\d{2}-\d{2}T/.test(s)) return s.slice(0, 10);
+  if (s.length > 18) return s.slice(0, 15) + "\u2026";
+  return s;
+}
+
+// src/SavedQueriesModal.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SavedQueriesModal({ saved, onClose, onLoad }) {
+  useEffect3(() => {
+    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" }) })
+  ] }) });
+}
+
+// src/QueryBuilder.tsx
+import { jsx as jsx5, jsxs as jsxs5 } 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 AUTO_REFRESH_FREQUENCIES = [
+  { label: "Every 5s", value: 5e3 },
+  { label: "Every 10s", value: 1e4 },
+  { label: "Every 20s", value: DEFAULT_AUTO_REFRESH_FREQUENCY_MS },
+  { label: "Every 30s", value: 3e4 },
+  { label: "Every 1m", value: 6e4 },
+  { label: "Every 2m", value: 2 * 6e4 },
+  { label: "Every 5m", value: 5 * 6e4 },
+  { label: "Every 10m", value: 10 * 6e4 }
+];
+var AUTO_REFRESH_TURN_OFF_AFTER = [
+  { label: "After 5m", value: DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS },
+  { label: "After 15m", value: 15 * 6e4 },
+  { label: "After 30m", value: 30 * 6e4 },
+  { label: "After 1h", value: 60 * 6e4 },
+  { label: "After 2h", value: 2 * 60 * 6e4 },
+  { label: "After 4h", value: 4 * 60 * 6e4 },
+  { label: "After 8h", value: 8 * 60 * 6e4 },
+  { label: "After 12h", value: 12 * 60 * 6e4 },
+  { label: "After 24h", value: 24 * 60 * 6e4 }
+];
+function autoRefreshPolls(frequencyMs, turnOffAfterMs) {
+  if (frequencyMs <= 0 || turnOffAfterMs <= 0) return Infinity;
+  return Math.floor(turnOffAfterMs / frequencyMs);
+}
+function formatDuration2(ms) {
+  const seconds = Math.round(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = minutes / 60;
+  return Number.isInteger(hours) ? `${hours}h` : `${minutes}m`;
+}
+function formatStatusTime(ms) {
+  if (ms == null) return "never";
+  return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit", second: "2-digit" });
+}
+function useFieldHasNull(api, fieldName) {
+  const [hasNull, setHasNull] = useState4(void 0);
+  useEffect4(() => {
+    if (!fieldName) return;
+    let cancelled = false;
+    void api.filterValues(fieldName, "").then((r) => {
+      if (!cancelled && typeof r.hasNull === "boolean") {
+        setHasNull(r.hasNull);
+      }
+    }).catch(() => {
+      if (!cancelled) setHasNull(void 0);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, fieldName]);
+  return hasNull;
+}
+function whereClauseAsText(clause, byName) {
+  const field = byName.get(clause.field)?.label ?? clause.field;
+  const op = clause.op.replace(/_/g, " ");
+  if (NULLARY_OPS2.has(clause.op)) return `${field} ${op}`;
+  const value = clause.value === "" ? "''" : clause.value;
+  return `${field} ${op} ${value}`;
+}
+function orderByAsText(term, byName) {
+  const field = byName.get(term.field)?.label ?? term.field;
+  const nulls = term.nulls ? ` nulls ${term.nulls}` : "";
+  return `${field} ${term.dir}${nulls}`;
+}
+function chipFieldWidthChars(text, fallback = 5, max = 30) {
+  return Math.min(max, Math.max(fallback, (text || "").length + 1));
+}
+function chipFieldWidthForInput(text, fieldType, fallback = 5, padding = 0) {
+  const cap = fieldType === "number" ? 10 : 30;
+  return chipFieldWidthChars(text, fallback, cap) + padding;
+}
+function chipFieldWidthForSelect(text, fallback = 3, max = 30) {
+  return chipFieldWidthChars(text, fallback, max) + 2;
+}
+function buildCollapsedSummary(where, orderBy, byName) {
+  const whereText = where.length === 0 ? "all rows" : where.map((c) => whereClauseAsText(c, byName)).join(" and ");
+  const 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 ");
+}
+function orderBySummaryText(orderBy, byName) {
+  return orderBy.length === 0 ? "(default)" : orderBy.map((term) => orderByAsText(term, byName)).join(", ");
+}
+function QueryBuilder({
+  api,
+  fields,
+  total,
+  running,
+  classNames,
+  collapsed,
+  onCollapsedChange,
+  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 collapsedControlled = typeof collapsed !== "undefined";
+  const isCollapsed = collapsedControlled ? collapsed : collapsedFallback;
+  const setCollapsed = (next) => {
+    if (collapsedControlled) {
+      onCollapsedChange?.(next);
+      return;
+    }
+    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(
+    () => api.saved.items.find((item) => queriesEqual(item.query, api.query)),
+    [api.query, api.saved.items]
+  );
+  const lastSavedQuery = useMemo3(
+    () => 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 isEditingSaved = editingSavedId != null && activeSavedQuery?.id === editingSavedId;
+  const showUpdateButton = Boolean(lastSavedQuery) && !activeSavedQuery;
+  const collapsedSummary = useMemo3(
+    () => buildCollapsedSummary(api.query.where, api.query.orderBy, byName),
+    [api.query.where, api.query.orderBy, byName]
+  );
+  const collapsedWhereText = useMemo3(
+    () => whereClauseSummaryText(api.query.where, byName),
+    [api.query.where, byName]
+  );
+  const collapsedOrderText = useMemo3(
+    () => orderBySummaryText(api.query.orderBy, byName),
+    [api.query.orderBy, byName]
+  );
+  const autoRefreshStatus = api.autoRefresh.status;
+  const selectedAutoRefreshPolls = autoRefreshPolls(autoRefreshFrequencyMs, autoRefreshTurnOffAfterMs);
+  const canSubmitAutoRefresh = selectedAutoRefreshPolls >= 1 && selectedAutoRefreshPolls <= MAX_AUTO_REFRESH_POLLS;
+  const autoRefreshButtonText = autoRefreshStatus ? `\u27F3 Auto-Update ${formatDuration2(autoRefreshStatus.frequencyMs)}` : "\u27F3 Auto-Update";
+  const rowSummary = `${api.rows.length} of ${total ?? "?"}`;
+  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(() => {
+    if (activeSavedQuery) {
+      setLastSavedId(activeSavedQuery.id);
+      if (!isEditingSaved) {
+        setEditingSavedName(activeSavedQuery.name);
+        setEditingSavedId(null);
+      }
+      return;
+    }
+    if (!isEditingUnsaved) {
+      setEditingSavedId(null);
+      setEditingSavedName("");
+    }
+  }, [activeSavedQuery, isEditingSaved, isEditingUnsaved]);
+  useEffect4(() => {
+    if (!lastSavedId || api.saved.items.some((item) => item.id === lastSavedId)) return;
+    setLastSavedId(null);
+  }, [api.saved.items, lastSavedId]);
+  useEffect4(() => {
+    const hasData = api.rows.length > 0 || total != null;
+    const rowsChanged = lastRowsRef.current !== api.rows;
+    const totalChanged = lastTotalRef.current !== total;
+    const loadingDone = !api.loading;
+    if (loadingDone && api.error) {
+      setLastFailureAt(Date.now());
+      lastRowsRef.current = api.rows;
+      lastTotalRef.current = total;
+      previousLoadingRef.current = api.loading;
+      return;
+    }
+    if (loadingDone && (previousLoadingRef.current || rowsChanged || totalChanged || lastUpdatedAt == null) && hasData) {
+      setLastUpdatedAt(Date.now());
+      setLastFailureAt(null);
+      lastRowsRef.current = api.rows;
+      lastTotalRef.current = total;
+    }
+    previousLoadingRef.current = api.loading;
+  }, [api.error, api.loading, api.rows, total, lastUpdatedAt]);
+  function saveFailed(error) {
+    const message = error instanceof Error ? error.message : "Failed to save query.";
+    if (typeof window !== "undefined") window.alert(message);
+  }
+  function beginEditSavedName() {
+    if (activeSavedQuery) {
+      setEditingSavedId(activeSavedQuery.id);
+      setEditingSavedName(activeSavedQuery.name);
+      return;
+    }
+    if (isEditingUnsaved) return;
+    setEditingSavedId(UNSAVED_QUERY_EDIT_ID);
+    setEditingSavedName((next) => next ? next : "Custom Query");
+  }
+  function cancelNameEdit() {
+    setEditingSavedId(null);
+    setEditingSavedName("");
+  }
+  async function persistSavedQuery(name) {
+    const trimmed = name.trim();
+    if (!trimmed) return null;
+    try {
+      const saved = await api.saved.save(trimmed);
+      setLastSavedId(saved.id);
+      return saved.id;
+    } catch (error) {
+      saveFailed(error);
+      return null;
+    }
+  }
+  async function commitSavedNameEdit() {
+    if (!isEditingSaved || !activeSavedQuery) return;
+    const trimmed = editingSavedName.trim();
+    if (!trimmed || trimmed === activeSavedQuery.name) {
+      cancelNameEdit();
+      return;
+    }
+    const savedId = await persistSavedQuery(trimmed);
+    if (!savedId) return;
+    await api.saved.remove(activeSavedQuery.id);
+    cancelNameEdit();
+  }
+  async function commitUnsavedNameEdit() {
+    if (!isEditingUnsaved) return;
+    const savedId = await persistSavedQuery(editingSavedName);
+    if (!savedId) {
+      cancelNameEdit();
+      return;
+    }
+    cancelNameEdit();
+  }
+  async function updateLastSavedQuery() {
+    if (!lastSavedQuery) return;
+    const wasDefault = api.saved.defaultId === lastSavedQuery.id;
+    const trimmedName = lastSavedQuery.name.trim();
+    if (!trimmedName) return;
+    try {
+      await api.saved.remove(lastSavedQuery.id);
+      const saved = await api.saved.save(trimmedName);
+      if (wasDefault) await api.saved.setDefault(saved.id);
+      setLastSavedId(saved.id);
+    } catch (error) {
+      saveFailed(error);
+    }
+  }
+  function commitNameEditor() {
+    if (isEditingSaved) {
+      void commitSavedNameEdit();
+      return;
+    }
+    if (isEditingUnsaved) {
+      void commitUnsavedNameEdit();
+      return;
+    }
+  }
+  useEffect4(() => {
+    if (isCollapsed) setShowSaved(false);
+  }, [isCollapsed]);
+  useEffect4(() => {
+    if (!showAutoRefresh || !autoRefreshStatus) return;
+    setAutoRefreshFrequencyMs(autoRefreshStatus.frequencyMs);
+    setAutoRefreshTurnOffAfterMs(autoRefreshStatus.turnOffAfterMs);
+  }, [showAutoRefresh, autoRefreshStatus]);
+  useEffect4(() => {
+    if (!showAutoRefresh) return;
+    function onDocumentClick(event) {
+      const wrapper = autoRefreshRef.current;
+      const target = event.target;
+      if (!wrapper || !target) return;
+      if (!wrapper.contains(target)) setShowAutoRefresh(false);
+    }
+    function onDocumentKeyDown(event) {
+      if (event.key === "Escape") setShowAutoRefresh(false);
+    }
+    function calculateAutoRefreshPosition() {
+      const popover = autoRefreshPopoverRef.current;
+      const wrapper = autoRefreshRef.current;
+      if (!popover || !wrapper) return;
+      const wrapperRect = wrapper.getBoundingClientRect();
+      const popWidth = popover.offsetWidth;
+      const viewportRightInset = 8;
+      setAutoRefreshPopoverAlignRight(wrapperRect.right + popWidth > window.innerWidth - viewportRightInset);
+    }
+    calculateAutoRefreshPosition();
+    const t = setTimeout(() => window.addEventListener("click", onDocumentClick), 0);
+    window.addEventListener("keydown", onDocumentKeyDown);
+    window.addEventListener("resize", calculateAutoRefreshPosition);
+    return () => {
+      clearTimeout(t);
+      window.removeEventListener("click", onDocumentClick);
+      window.removeEventListener("keydown", onDocumentKeyDown);
+      window.removeEventListener("resize", calculateAutoRefreshPosition);
+    };
+  }, [showAutoRefresh]);
+  function submitAutoRefresh() {
+    if (!canSubmitAutoRefresh) return;
+    try {
+      api.autoRefresh.start({
+        frequencyMs: autoRefreshFrequencyMs,
+        turnOffAfterMs: autoRefreshTurnOffAfterMs
+      });
+      setShowAutoRefresh(false);
+    } catch (error) {
+      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(
+            "button",
+            {
+              type: "button",
+              className: cx3("qt-qb-saved-star", isSavedQuery ? "qt-qb-saved-star--saved" : "qt-qb-saved-star--unsaved"),
+              title: isSavedQuery ? "Rename saved query" : "Save query",
+              disabled: isBusy,
+              onClick: beginEditSavedName,
+              children: isSavedQuery ? "\u2605" : "\u2606"
+            }
+          ),
+          isEditingSaved || isEditingUnsaved ? /* @__PURE__ */ jsxs5("span", { className: "qt-qb-saved-input-wrap", children: [
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: "text",
+                className: "qt-qb-saved-input",
+                value: editingSavedName,
+                disabled: isBusy,
+                autoFocus: true,
+                onChange: (e) => setEditingSavedName(e.target.value),
+                onBlur: commitNameEditor,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitNameEditor();
+                  }
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    cancelNameEdit();
+                  }
+                },
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "qt-qb-saved-cancel",
+                title: "Do not save",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  cancelNameEdit();
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: "\u2715"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: cx3("qt-qb-saved-name", !activeSavedQuery && "qt-qb-saved-name--custom"),
+              onClick: beginEditSavedName,
+              children: activeSavedQuery ? activeSavedQuery.name : "Custom Query"
+            }
+          )
+        ] }),
+        isCollapsed ? /* @__PURE__ */ jsxs5("span", { className: "qt-qb-summary qt-truncate", title: collapsedSummary, children: [
+          /* @__PURE__ */ jsx5("span", { className: "qt-qb-summary-kw", children: "WHERE" }),
+          " ",
+          /* @__PURE__ */ jsx5("strong", { children: collapsedWhereText }),
+          " ",
+          /* @__PURE__ */ jsx5("span", { className: "qt-qb-summary-kw", children: "ORDER BY" }),
+          " ",
+          /* @__PURE__ */ jsx5("strong", { children: collapsedOrderText })
+        ] }) : null
+      ] }),
+      showUpdateButton ? /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: cx3("qt-btn", classNames?.button),
+          onClick: () => void updateLastSavedQuery(),
+          disabled: isBusy,
+          children: `Update Query '${lastSavedQuery?.name ?? "query"}'`
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs5("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(
+        "button",
+        {
+          type: "button",
+          className: cx3("qt-btn", "qt-qb-collapse-btn", classNames?.button),
+          onClick: () => setCollapsed(!isCollapsed),
+          "aria-expanded": !isCollapsed,
+          "aria-controls": bodyId,
+          title: isCollapsed ? "Expand query builder" : "Collapse query builder",
+          children: [
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: cx3("qt-qb-collapse-caret", isCollapsed && "qt-qb-collapse-caret--collapsed"),
+                "aria-hidden": "true",
+                children: "\u25BE"
+              }
+            ),
+            /* @__PURE__ */ jsx5("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 })
+      ] }),
+      /* @__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" })
+      ] })
+    ] }) : 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: [
+        "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(
+          autoRefreshStatus.turnOffAfterMs
+        )} (${autoRefreshStatus.pollCount} polls run)` }) : null,
+        /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh", ref: autoRefreshRef, children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: cx3("qt-btn", Boolean(autoRefreshStatus) && "qt-btn--active", classNames?.button),
+              onClick: () => setShowAutoRefresh((next) => !next),
+              "aria-expanded": showAutoRefresh,
+              title: autoRefreshStatus ? "View or clear auto-update" : "Configure auto-update",
+              children: autoRefreshButtonText
+            }
+          ),
+          showAutoRefresh ? /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              ref: autoRefreshPopoverRef,
+              className: cx3("qt-auto-refresh-popover", autoRefreshPopoverAlignRight && "qt-auto-refresh-popover--align-right"),
+              role: "dialog",
+              "aria-label": "Auto-refresh settings",
+              children: [
+                /* @__PURE__ */ jsxs5("label", { className: "qt-auto-refresh-field", children: [
+                  /* @__PURE__ */ jsx5("span", { children: "Frequency" }),
+                  /* @__PURE__ */ jsx5(
+                    "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))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs5("label", { className: "qt-auto-refresh-field", children: [
+                  /* @__PURE__ */ jsx5("span", { children: "Turn off after" }),
+                  /* @__PURE__ */ jsx5(
+                    "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(
+                        "option",
+                        {
+                          value: option.value,
+                          disabled: autoRefreshPolls(autoRefreshFrequencyMs, option.value) < 1 || autoRefreshPolls(autoRefreshFrequencyMs, option.value) > MAX_AUTO_REFRESH_POLLS,
+                          children: option.label
+                        },
+                        option.value
+                      ))
+                    }
+                  )
+                ] }),
+                /* @__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: [
+                  "Active: every ",
+                  formatDuration2(autoRefreshStatus.frequencyMs),
+                  ", clears after",
+                  " ",
+                  formatDuration2(autoRefreshStatus.turnOffAfterMs),
+                  ". ",
+                  autoRefreshStatus.pollCount,
+                  " polls run."
+                ] }) : null,
+                /* @__PURE__ */ jsxs5("span", { className: "qt-auto-refresh-actions", children: [
+                  /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      type: "button",
+                      className: cx3("qt-btn", classNames?.button),
+                      onClick: submitAutoRefresh,
+                      disabled: !canSubmitAutoRefresh,
+                      children: autoRefreshStatus ? "Update" : "Start"
+                    }
+                  ),
+                  autoRefreshStatus ? /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      type: "button",
+                      className: cx3("qt-btn", classNames?.button),
+                      onClick: () => {
+                        api.autoRefresh.stop();
+                        setShowAutoRefresh(false);
+                      },
+                      children: "Clear"
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className: cx3("qt-btn", "qt-btn--primary", classNames?.button),
+            onClick: api.refresh,
+            disabled: isBusy,
+            children: "Run Now"
+          }
+        )
+      ] })
+    ] }),
+    !isCollapsed && showSaved ? /* @__PURE__ */ jsx5(SavedQueriesModal, { saved: api.saved, onClose: () => setShowSaved(false), onLoad: setLastSavedId }) : null
+  ] });
+}
+function SelectRow({
+  api,
+  fields,
+  classNames,
+  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]);
+  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) => {
+      const label = fieldLabelByName.get(name) ?? name;
+      return /* @__PURE__ */ jsxs5(
+        "span",
+        {
+          className: cx3(
+            "qt-chip",
+            "qt-chip--col",
+            dragSource === name && "qt-chip--dragging",
+            classNames?.columnChip ?? classNames?.chip
+          ),
+          draggable: !disabled,
+          onDragStart: (e) => {
+            columnDrag.start(name, fieldNames.indexOf(name));
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", name);
+          },
+          onDragOver: (e) => {
+            if (!columnDrag.source) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "move";
+            if (columnDrag.source !== name) {
+              const withoutDragged = fieldNames.filter((n) => n !== columnDrag.source);
+              let next = withoutDragged.indexOf(name);
+              if (next >= 0) {
+                const rect = e.currentTarget.getBoundingClientRect();
+                if (e.clientX > rect.left + rect.width / 2) next += 1;
+                columnDrag.over(next);
+              }
+            }
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "move";
+            const from = columnDrag.source || e.dataTransfer.getData("text/plain");
+            if (from && columnDrag.overIndex != null) reorderByIndex(from, columnDrag.overIndex);
+            columnDrag.end();
+          },
+          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" })
+          ]
+        },
+        name
+      );
+    }),
+    adding ? /* @__PURE__ */ jsx5(
+      FieldPicker,
+      {
+        fields: select.hidden.filter(isSelectable),
+        onPick: (f) => {
+          select.show(f.name);
+          setAdding(false);
+        },
+        onClose: () => setAdding(false)
+      }
+    ) : /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "qt-add",
+        onClick: () => setAdding(true),
+        disabled: disabled || select.hidden.length === 0,
+        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" })
+  ] });
+}
+function WhereRow({
+  api,
+  byName,
+  fields,
+  classNames,
+  disabled
+}) {
+  const [adding, setAdding] = useState4(false);
+  function addClause(f) {
+    const op = 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(
+      FieldPicker,
+      {
+        fields: fields.filter(isFilterable),
+        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" })
+  ] });
+}
+function ClauseChip({
+  api,
+  field,
+  clauses,
+  classNames,
+  disabled,
+  onChange,
+  onRemove
+}) {
+  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",
+          {
+            className: cx3("qt-chip-op", classNames?.select),
+            value: clause.op,
+            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))
+          }
+        ),
+        needsValue && /* @__PURE__ */ jsx5(
+          ValueInput,
+          {
+            api,
+            field,
+            value: clause.value,
+            classNames,
+            onChange: (v) => onChange(entry.index, { ...clause, value: v })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className: "qt-chip-x",
+            onClick: () => onRemove(entry.index),
+            disabled,
+            children: "\u2715"
+          }
+        )
+      ] }, entry.index);
+    }) })
+  ] });
+}
+function ValueInput({
+  api,
+  field,
+  value,
+  classNames,
+  onChange
+}) {
+  const strategy = field ? filterValuesFor(field) : { source: "freeform" };
+  if (strategy.source === "static") {
+    const selectedText = value || "\u2014";
+    const widthChars = chipFieldWidthForSelect(selectedText, 4);
+    return /* @__PURE__ */ jsxs5(
+      "select",
+      {
+        className: cx3("qt-chip-val", classNames?.select),
+        value,
+        style: { width: `${widthChars}ch` },
+        onChange: (e) => onChange(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }),
+          strategy.options.map((o) => /* @__PURE__ */ jsx5("option", { value: o, children: o }, o))
+        ]
+      }
+    );
+  }
+  if (strategy.source === "freeform" || !field) {
+    const widthChars = chipFieldWidthForInput(value || "value", field?.type, 5, 4);
+    return /* @__PURE__ */ jsx5(
+      "input",
+      {
+        className: cx3("qt-chip-val", classNames?.input),
+        value,
+        placeholder: "value",
+        size: widthChars,
+        style: { width: `${widthChars}ch` },
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(AutocompleteInput, { api, field, value, classNames, onChange });
+}
+function AutocompleteInput({
+  api,
+  field,
+  value,
+  classNames,
+  onChange
+}) {
+  const [result, setResult] = useState4({ values: [], hasMore: false });
+  const listId = useId();
+  useEffect4(() => {
+    let cancelled = false;
+    const t = setTimeout(() => {
+      void api.filterValues(field.name, value).then((r) => {
+        if (!cancelled) setResult(r);
+      }).catch(() => {
+        if (!cancelled) setResult({ values: [], hasMore: false });
+      });
+    }, 200);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [api, field.name, value]);
+  return /* @__PURE__ */ jsxs5("span", { className: "qt-autocomplete", children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        className: cx3("qt-chip-val", classNames?.input),
+        value,
+        placeholder: "value",
+        list: listId,
+        size: chipFieldWidthForInput(value || "value", field.type, 5, 4),
+        style: { width: `${chipFieldWidthForInput(value || "value", field.type, 5, 4)}ch` },
+        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" })
+  ] });
+}
+function OrderTermChip({
+  api,
+  field,
+  term,
+  dataIndex,
+  priority,
+  showPriority,
+  isDragSource,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  disabled,
+  updateTerm,
+  removeTerm,
+  classNames,
+  label
+}) {
+  const fieldHasNull = useFieldHasNull(api, field?.name);
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: cx3("qt-chip", "qt-chip--col", "qt-chip--sort", isDragSource && "qt-chip--dragging", classNames?.chip),
+      draggable: !disabled,
+      onDragStart: (e) => {
+        onDragStart();
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", term.field);
+      },
+      onDragOver,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop();
+      },
+      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(
+          "button",
+          {
+            type: "button",
+            className: "qt-chip-op-btn",
+            disabled,
+            onClick: () => updateTerm(dataIndex, { dir: term.dir === "asc" ? "desc" : "asc" }),
+            children: term.dir === "asc" ? "\u2191 asc" : "\u2193 desc"
+          }
+        ),
+        fieldHasNull !== false && /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            className: "qt-chip-op-btn",
+            disabled,
+            title: "where NULL values sort",
+            onClick: () => updateTerm(dataIndex, { nulls: (term.nulls ?? "last") === "last" ? "first" : "last" }),
+            children: [
+              "nulls ",
+              term.nulls ?? "last"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => removeTerm(dataIndex), disabled, children: "\u2715" })
+      ]
+    }
+  );
+}
+function OrderRow({
+  api,
+  fields,
+  classNames,
+  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);
+  function setOrderBy(next) {
+    api.setSort(next);
+  }
+  function updateTerm(i, patch) {
+    setOrderBy(orderBy.map((o, k) => k === i ? { ...o, ...patch } : o));
+  }
+  function removeTerm(i) {
+    setOrderBy(orderBy.filter((_, k) => k !== i));
+  }
+  function addTerm(f) {
+    const field = f.sort?.field ?? f.name;
+    const nextOrderBy = [...orderBy, { field, dir: "desc" }];
+    if (orderBy.some((o) => o.field === field)) {
+      setAdding(false);
+      return;
+    }
+    const hasSelectColumn = api.select.visible.some((c) => c.field === field);
+    if (hasSelectColumn) {
+      setOrderBy(nextOrderBy);
+      setAdding(false);
+      return;
+    }
+    api.setQuery((q) => ({
+      ...q,
+      offset: 0,
+      orderBy: nextOrderBy,
+      select: q.select.length ? [...q.select, { field }] : [...api.select.visible, { field }]
+    }));
+    setAdding(false);
+  }
+  const termFields = orderBy.map((o) => o.field);
+  const termByField = useMemo3(() => new Map(orderBy.map((o) => [o.field, o])), [orderBy]);
+  function previewFields() {
+    if (!drag) return termFields;
+    const without = termFields.filter((f) => f !== drag.source);
+    if (without.length === termFields.length) return termFields;
+    const at = Math.max(0, Math.min(drag.overIndex, without.length));
+    return [...without.slice(0, at), drag.source, ...without.slice(at)];
+  }
+  function handleSortOver(e, field) {
+    if (!drag) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (drag.source !== field) {
+      const without = termFields.filter((f) => f !== drag.source);
+      let next = without.indexOf(field);
+      if (next >= 0) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        if (e.clientX > rect.left + rect.width / 2) next += 1;
+        setDrag((d) => d && d.overIndex !== next ? { source: d.source, overIndex: next } : d);
+      }
+    }
+  }
+  function commitSortDrop() {
+    if (drag) setOrderBy(previewFields().map((f) => termByField.get(f)));
+    setDrag(null);
+  }
+  const rendered = previewFields();
+  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 /* @__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)" }),
+    rendered.map((f, pos) => {
+      const term = termByField.get(f);
+      return /* @__PURE__ */ jsx5(
+        OrderTermChip,
+        {
+          api,
+          field: byName.get(f),
+          term,
+          dataIndex: orderBy.findIndex((o) => o.field === f),
+          priority: pos + 1,
+          showPriority: orderBy.length > 1,
+          isDragSource: drag?.source === f,
+          onDragStart: () => setDrag({ source: f, overIndex: termFields.indexOf(f) }),
+          onDragOver: (e) => handleSortOver(e, f),
+          onDrop: commitSortDrop,
+          onDragEnd: () => setDrag(null),
+          disabled,
+          updateTerm,
+          removeTerm,
+          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" })
+  ] });
+}
+function WindowRow({
+  api,
+  classNames,
+  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 hasLimitDefault = query.limit === api.defaults.limit;
+  const hasOffsetDefault = query.offset === api.defaults.offset;
+  const hasWindowDefault = hasLimitDefault && hasOffsetDefault;
+  function commitLimit() {
+    api.setLimit(Math.max(1, Number(limitDraft) || query.limit));
+  }
+  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(
+      "button",
+      {
+        type: "button",
+        className: "qt-link-btn",
+        onClick: () => {
+          api.setLimit(api.defaults.limit);
+          api.setOffset(api.defaults.offset);
+        },
+        disabled,
+        title: "Reset limit and offset",
+        children: "reset"
+      }
+    )
+  ] });
+}
+var AGG_OPS = ["count", "count_distinct", "sum", "avg", "min", "max"];
+var AGG_OP_LABELS = {
+  count: "count",
+  count_distinct: "count distinct",
+  sum: "sum",
+  avg: "avg",
+  min: "min",
+  max: "max"
+};
+function MetricsRow({
+  api,
+  fields,
+  classNames,
+  disabled
+}) {
+  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 ids = clauses.map((c) => c.id);
+  const byId = useMemo3(() => new Map(clauses.map((c) => [c.id, c])), [clauses]);
+  function previewIds() {
+    if (!drag) return ids;
+    const without = ids.filter((i) => i !== drag.source);
+    if (without.length === ids.length) return ids;
+    const at = Math.max(0, Math.min(drag.overIndex, without.length));
+    return [...without.slice(0, at), drag.source, ...without.slice(at)];
+  }
+  function handleOver(e, id) {
+    if (!drag) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (drag.source === id) return;
+    const without = ids.filter((i) => i !== drag.source);
+    let next = without.indexOf(id);
+    if (next >= 0) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      if (e.clientX > rect.left + rect.width / 2) next += 1;
+      setDrag((d) => d && d.overIndex !== next ? { source: d.source, overIndex: next } : d);
+    }
+  }
+  function commitDrop() {
+    if (drag) aggregations.move(drag.source, drag.overIndex);
+    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) => {
+      const clause = byId.get(id);
+      return /* @__PURE__ */ jsx5(
+        MetricChip,
+        {
+          clause,
+          measurable,
+          groupable,
+          classNames,
+          disabled,
+          isDragSource: drag?.source === id,
+          onDragStart: () => setDrag({ source: id, overIndex: ids.indexOf(id) }),
+          onDragOver: (e) => handleOver(e, id),
+          onDrop: commitDrop,
+          onDragEnd: () => setDrag(null),
+          onChangeOp: (op) => changeMetricOp(aggregations, clause, measurable, op),
+          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)
+        },
+        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" })
+  ] });
+}
+function changeMetricOp(aggregations, clause, measurable, op) {
+  const field = clause.field;
+  const stillValid = field != null && measurable.some((f) => f.name === field && aggOpsForField(f).includes(op));
+  if (field != null && !stillValid) aggregations.update(clause.id, { op, field: void 0 });
+  else aggregations.update(clause.id, { op });
+}
+function MetricChip({
+  clause,
+  measurable,
+  groupable,
+  classNames,
+  disabled,
+  isDragSource,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  onChangeOp,
+  onChangeField,
+  onAddGroup,
+  onRemoveGroup,
+  onRemove
+}) {
+  const [addingGroup, setAddingGroup] = useState4(false);
+  const byName = useMemo3(() => 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(
+    "span",
+    {
+      className: cx3("qt-chip", "qt-chip--agg", isDragSource && "qt-chip--dragging", classNames?.chip),
+      draggable: !disabled,
+      onDragStart: (e) => {
+        onDragStart();
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", clause.id);
+      },
+      onDragOver,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop();
+      },
+      onDragEnd,
+      title: "drag to reorder metrics",
+      children: [
+        /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "qt-chip-grip", children: "\u22EE\u22EE" }),
+        /* @__PURE__ */ jsx5(
+          "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))
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "select",
+          {
+            className: cx3("qt-chip-val", classNames?.select),
+            value: clause.field ?? "",
+            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))
+            ]
+          }
+        ),
+        /* @__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" })
+          ] }, g)),
+          addingGroup ? /* @__PURE__ */ jsx5(
+            FieldPicker,
+            {
+              fields: groupable,
+              excluded: clause.groupBy,
+              onPick: (f) => {
+                onAddGroup(f.name);
+                setAddingGroup(false);
+              },
+              onClose: () => setAddingGroup(false)
+            }
+          ) : /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: "qt-add qt-chip-agg-add",
+              onClick: () => setAddingGroup(true),
+              disabled,
+              title: "Group by a field",
+              children: clause.groupBy.length === 0 ? "+ by" : "+"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("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 { EMPTY_QUERY } from "@pythia-software/query-table-core";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var cx4 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
+var OP_LABELS = {
+  count: "Count",
+  count_distinct: "Distinct",
+  sum: "Sum",
+  avg: "Avg",
+  min: "Min",
+  max: "Max"
+};
+var NULL_KEY = "\u2205";
+function MetricsPanel({
+  aggregations,
+  fields,
+  renderers,
+  emptyMessage,
+  classNames
+}) {
+  const byName = useMemo4(() => 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;
+  }
+  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: [
+      "Metrics failed: ",
+      error.message
+    ] }) : null,
+    clauses.map((clause) => /* @__PURE__ */ jsx6(
+      MetricCard,
+      {
+        clause,
+        buckets: resultById.get(clause.id) ?? [],
+        loading: loading && !resultById.has(clause.id),
+        byName,
+        renderers,
+        className: classNames?.metric
+      },
+      clause.id
+    ))
+  ] });
+}
+function MetricCard({
+  clause,
+  buckets,
+  loading,
+  byName,
+  renderers,
+  className
+}) {
+  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 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: [
+        "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) })
+  ] });
+}
+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: [
+      bucket.count.toLocaleString(),
+      " rows"
+    ] })
+  ] });
+}
+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) => {
+    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) })
+    ] }, `${keyText(b.keys[0])}-${i}`);
+  }) });
+}
+function Pivot({
+  buckets,
+  fmt,
+  rowLabel,
+  colLabel
+}) {
+  const rowKeys = distinctKeys(buckets, 0);
+  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: [
+        rowLabel,
+        " ",
+        /* @__PURE__ */ jsx6("span", { className: "qt-muted", children: "\\" }),
+        " ",
+        colLabel
+      ] }) }),
+      colKeys.map((c) => /* @__PURE__ */ jsx6("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) }),
+      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));
+      })
+    ] }, keyText(r))) })
+  ] }) });
+}
+function FlatTable({
+  buckets,
+  fmt,
+  groupLabels,
+  valueLabel
+}) {
+  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 })
+    ] }) }),
+    /* @__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) })
+    ] }, i)) })
+  ] }) });
+}
+function metricTitle(clause, measure) {
+  if (clause.label) return clause.label;
+  if (clause.op === "count" && !measure) return "Count";
+  return `${OP_LABELS[clause.op]} ${measure?.label ?? clause.field ?? ""}`.trim();
+}
+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 (op === "count" || op === "count_distinct") {
+    return typeof value === "number" ? formatNumber(value, 0) : String(value);
+  }
+  if (typeof value === "number") {
+    const key = typeof measure?.render === "string" ? measure.render : void 0;
+    if (key && UNIT_RENDER_KEYS.has(key) && measure && renderers) {
+      const node = tryRender(measure, renderers, value);
+      if (node != null) return node;
+    }
+    return formatNumber(value, decimals);
+  }
+  if (measure && renderers) {
+    const node = tryRender(measure, renderers, value);
+    if (node != null) return node;
+  }
+  return String(value);
+}
+function tryRender(measure, renderers, value) {
+  try {
+    const node = resolveRenderer(measure, renderers)({
+      value,
+      row: {},
+      field: measure,
+      query: EMPTY_QUERY
+    });
+    return node != null && node !== "" ? node : null;
+  } catch {
+    return null;
+  }
+}
+function formatNumber(value, decimals) {
+  if (!Number.isFinite(value)) return String(value);
+  return value.toLocaleString(void 0, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+}
+function cardDecimals(buckets) {
+  const nums = buckets.map((b) => b.value).filter((v) => typeof v === "number" && Number.isFinite(v));
+  if (nums.length === 0) return 0;
+  if (nums.every((v) => Number.isInteger(v))) return 0;
+  const maxAbs = Math.max(...nums.map((v) => Math.abs(v)));
+  const intDigits = maxAbs >= 1 ? Math.floor(Math.log10(maxAbs)) + 1 : 0;
+  return Math.min(6, Math.max(0, 5 - intDigits));
+}
+function barMagnitude(b) {
+  return typeof b.value === "number" ? Math.abs(b.value) : b.count;
+}
+function distinctKeys(buckets, axis) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const b of buckets) {
+    const k = b.keys[axis] ?? null;
+    const t = keyText(k);
+    if (!seen.has(t)) {
+      seen.add(t);
+      out.push(k);
+    }
+  }
+  return out;
+}
+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);
+}
+
+// src/SelectionToolbar.tsx
+import { jsx as jsx7, jsxs as jsxs7 } 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: [
+      selection.count,
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "qt-btn",
+        onClick: selection.clear,
+        disabled: selection.count === 0,
+        children: "clear"
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "qt-selection-actions", children: actions(selectedIds) })
+  ] });
+}
+export {
+  CellMenu,
+  DataTable,
+  FieldPicker,
+  MetricsPanel,
+  QueryBuilder,
+  SavedQueriesModal,
+  SelectionToolbar,
+  defaultRenderers,
+  resolveRenderer,
+  safeLinkHref
+};
+//# sourceMappingURL=index.js.map