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

package/dist/index.js

@@ -137,7 +137,8 @@ function formatRelative(iso) {
 }
 
 // src/DataTable.tsx
-import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { isSortable, readFieldValue } from "@pythia-software/query-table-core";
 import { useColumnDrag } from "@pythia-software/query-table-react";
 
@@ -292,6 +293,9 @@ var AUTOFIT_EXTRA_PX = 16;
 var MENU_WIDTH2 = 240;
 var MENU_ROW_HEIGHT = 32;
 var COPY_FEEDBACK_MS = 900;
+var DEFAULT_MAX_HEIGHT = 600;
+var DEFAULT_ROW_HEIGHT = 37;
+var DEFAULT_OVERSCAN = 8;
 var SELECTION_COLUMN = "__qt_selection__";
 function DataTable(props) {
   const {
@@ -307,27 +311,75 @@ function DataTable(props) {
     total = null,
     loading,
     emptyMessage,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    estimateRowHeight = DEFAULT_ROW_HEIGHT,
+    overscan = DEFAULT_OVERSCAN,
     classNames
   } = props;
   const [menu, setMenu] = useState2(null);
-  const [resizingField, setResizingField] = useState2(null);
-  const [draftWidths, setDraftWidths] = useState2({});
   const [selectionColumnWidth, setSelectionColumnWidth] = useState2(DEFAULT_SELECTION_WIDTH);
   const [tableColumnOrder, setTableColumnOrder] = useState2([]);
   const [copiedCellKey, setCopiedCellKey] = useState2(null);
+  const [headerHeight, setHeaderHeight] = useState2(0);
+  const [showHorizontalCue, setShowHorizontalCue] = useState2(false);
   const tableWrapRef = useRef(null);
+  const tableHeadRef = useRef(null);
+  const tableRef = useRef(null);
+  const resizeGuideRef = useRef(null);
   const resizeCommitRef = useRef(null);
+  const resizePreviewRef = useRef(null);
+  const resizeFrameRef = useRef(null);
+  const cancelResizeRef = useRef(null);
   const resizingFieldRef = useRef(null);
   const copiedCellTimerRef = useRef(null);
   const localColumnDrag = useColumnDrag();
   const columnDrag = props.columnDrag ?? localColumnDrag;
+  const rowIds = useMemo(() => rows.map(rowId), [rowId, rows]);
+  const virtualRowKeys = useMemo(
+    () => rowIds.map((id, index) => id == null ? `index:${index}` : `${typeof id}:${String(id)}`),
+    [rowIds]
+  );
+  const getVirtualRowKey = useCallback((index) => virtualRowKeys[index] ?? `index:${index}`, [virtualRowKeys]);
+  const normalizedEstimate = Number.isFinite(estimateRowHeight) ? Math.max(1, estimateRowHeight) : DEFAULT_ROW_HEIGHT;
+  const normalizedOverscan = Number.isFinite(overscan) ? Math.max(0, Math.floor(overscan)) : DEFAULT_OVERSCAN;
+  const estimateVirtualRow = useCallback(() => normalizedEstimate, [normalizedEstimate]);
+  const initialViewportHeight = typeof maxHeight === "number" && maxHeight > 0 ? maxHeight : DEFAULT_MAX_HEIGHT;
+  const initialRect = useMemo(() => ({ width: 0, height: initialViewportHeight }), [initialViewportHeight]);
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => tableWrapRef.current,
+    estimateSize: estimateVirtualRow,
+    getItemKey: getVirtualRowKey,
+    overscan: normalizedOverscan,
+    // The header participates in normal table layout even while it is sticky.
+    // Offset row measurements so the virtual range matches the body's origin.
+    scrollMargin: headerHeight,
+    initialRect
+  });
   useEffect2(() => {
     return () => {
       if (copiedCellTimerRef.current) {
         clearTimeout(copiedCellTimerRef.current);
         copiedCellTimerRef.current = null;
       }
+      cancelResizeRef.current?.();
+    };
+  }, []);
+  useEffect2(() => {
+    const header = tableHeadRef.current;
+    if (!header) return;
+    const measureHeader = () => {
+      const next = header.getBoundingClientRect().height;
+      setHeaderHeight((current) => current === next ? current : next);
     };
+    measureHeader();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measureHeader);
+      return () => window.removeEventListener("resize", measureHeader);
+    }
+    const observer = new ResizeObserver(measureHeader);
+    observer.observe(header);
+    return () => observer.disconnect();
   }, []);
   function cellKey(rowIdValue, rowIndex, fieldName) {
     return rowIdValue == null ? `row:${rowIndex}:${fieldName}` : `id:${rowIdValue}:${fieldName}`;
@@ -361,7 +413,7 @@ function DataTable(props) {
     }
     showCopyFeedback(cellKey(rowIdValue, rowIndex, f.name));
   }
-  const pageIds = rows.map(rowId).filter((id) => id != null);
+  const pageIds = rowIds.filter((id) => id != null);
   const headerState = selection ? selection.pageState(pageIds) : "none";
   const showSel = selection != null;
   function sortKeyFor(f) {
@@ -396,11 +448,11 @@ function DataTable(props) {
     return col?.width ?? f.select?.width;
   }
   function resolvedWidthFor(name, f) {
-    return draftWidths[name] ?? widthFor(name, f);
+    return widthFor(name, f);
   }
   function resolvedColumnWidthFor(name, f) {
-    if (name === SELECTION_COLUMN) return draftWidths[name] ?? selectionColumnWidth;
-    return f ? resolvedWidthFor(name, f) : draftWidths[name];
+    if (name === SELECTION_COLUMN) return selectionColumnWidth;
+    return f ? resolvedWidthFor(name, f) : void 0;
   }
   function displayColumnWidthFor(name, f) {
     if (name === SELECTION_COLUMN) return resolvedColumnWidthFor(name) ?? DEFAULT_SELECTION_WIDTH;
@@ -424,16 +476,20 @@ function DataTable(props) {
     const px = clampWidth(width);
     onQueryChange((prev) => ({ ...prev, select: writeWidth(prev.select, fields, name, px) }));
   }
-  function setDraftWidth(name, width) {
-    setDraftWidths((prev) => prev[name] === width ? prev : { ...prev, [name]: width });
-  }
-  function clearDraftWidth(name) {
-    setDraftWidths((prev) => {
-      if (!(name in prev)) return prev;
-      const next = { ...prev };
-      delete next[name];
-      return next;
-    });
+  function applyResizeGuide() {
+    const preview = resizePreviewRef.current;
+    const guide = resizeGuideRef.current;
+    if (!preview || !guide) return;
+    guide.style.transform = `translateX(${preview.guideX}px)`;
+  }
+  function applyCommittedResize() {
+    const preview = resizePreviewRef.current;
+    const table = tableRef.current;
+    if (!preview || !table) return;
+    const selector = `col[data-qt-column="${cssAttributeValue(preview.name)}"]`;
+    const col = table.querySelector(selector);
+    if (col) col.style.width = `${preview.width}px`;
+    table.style.minWidth = `${preview.startTableWidth + preview.width - preview.previousWidth}px`;
   }
   function startResize(name, startWidth, e) {
     e.preventDefault();
@@ -442,30 +498,70 @@ function DataTable(props) {
     const startW = startWidth ?? e.currentTarget.parentElement?.getBoundingClientRect().width ?? DEFAULT_WIDTH;
     const previousCursor = document.body.style.cursor;
     const previousUserSelect = document.body.style.userSelect;
+    const initialWidth = clampColumnWidth(name, startW);
+    const wrap = tableWrapRef.current;
+    const wrapRect = wrap?.getBoundingClientRect();
+    const header = e.currentTarget.parentElement;
     resizeCommitRef.current = null;
+    resizePreviewRef.current = {
+      name,
+      width: initialWidth,
+      previousWidth: displayColumnWidthFor(name, fieldByName.get(name)),
+      startTableWidth: tableWidth,
+      guideX: startX - (wrapRect?.left ?? 0) + (wrap?.scrollLeft ?? 0)
+    };
     resizingFieldRef.current = name;
-    setResizingField(name);
-    setDraftWidth(name, clampColumnWidth(name, startW));
+    tableWrapRef.current?.classList.add("qt-table-wrap--resizing");
+    header?.classList.add("qt-th--resizing");
+    if (header) header.draggable = false;
+    if (resizeGuideRef.current) {
+      resizeGuideRef.current.style.display = "block";
+      resizeGuideRef.current.style.top = `${wrap?.scrollTop ?? 0}px`;
+      resizeGuideRef.current.style.height = `${wrap?.clientHeight ?? 0}px`;
+    }
+    applyResizeGuide();
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
-    const finish = () => {
+    const cleanup = (commitWidth) => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", finish);
       window.removeEventListener("pointercancel", finish);
+      if (resizeFrameRef.current != null) {
+        cancelAnimationFrame(resizeFrameRef.current);
+        resizeFrameRef.current = null;
+        applyResizeGuide();
+      }
       document.body.style.cursor = previousCursor;
       document.body.style.userSelect = previousUserSelect;
-      const commit = resizeCommitRef.current;
+      tableWrapRef.current?.classList.remove("qt-table-wrap--resizing");
+      tableRef.current?.querySelector(`th[data-qt-field="${cssAttributeValue(name)}"]`)?.classList.remove("qt-th--resizing");
+      if (header) header.draggable = true;
+      const commit = commitWidth ? resizeCommitRef.current : null;
+      if (commit) applyCommittedResize();
+      if (resizeGuideRef.current) resizeGuideRef.current.style.display = "none";
       resizeCommitRef.current = null;
+      resizePreviewRef.current = null;
       resizingFieldRef.current = null;
-      setResizingField(null);
-      clearDraftWidth(name);
+      cancelResizeRef.current = null;
       if (commit) commitColumnWidth(commit.name, commit.width);
     };
+    const finish = () => cleanup(true);
     const onMove = (ev) => {
       const next = clampColumnWidth(name, startW + (ev.clientX - startX));
       resizeCommitRef.current = { name, width: next };
-      setDraftWidth(name, next);
+      const preview = resizePreviewRef.current;
+      if (preview) {
+        preview.width = next;
+        preview.guideX = startX + (next - startW) - (wrapRect?.left ?? 0) + (wrap?.scrollLeft ?? 0);
+      }
+      if (resizeFrameRef.current == null) {
+        resizeFrameRef.current = requestAnimationFrame(() => {
+          resizeFrameRef.current = null;
+          applyResizeGuide();
+        });
+      }
     };
+    cancelResizeRef.current = () => cleanup(false);
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", finish);
     window.addEventListener("pointercancel", finish);
@@ -573,6 +669,22 @@ function DataTable(props) {
     const f = fieldByName.get(name);
     return sum + displayColumnWidthFor(name, f);
   }, trailing ? 40 : 0);
+  useEffect2(() => {
+    const wrap = tableWrapRef.current;
+    if (!wrap) return;
+    const updateCue = () => {
+      const hasMoreToRight = wrap.scrollWidth - wrap.clientWidth - wrap.scrollLeft > 2;
+      setShowHorizontalCue(hasMoreToRight);
+    };
+    updateCue();
+    window.addEventListener("resize", updateCue);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateCue);
+    observer?.observe(wrap);
+    return () => {
+      window.removeEventListener("resize", updateCue);
+      observer?.disconnect();
+    };
+  }, [renderedColumnNames, tableWidth]);
   const start = query.offset;
   const end = total != null ? Math.min(start + query.limit, total) : start + rows.length;
   const canPrev = start > 0;
@@ -580,7 +692,16 @@ function DataTable(props) {
   const prevPage = () => onQueryChange((prev) => ({ ...prev, offset: Math.max(0, prev.offset - prev.limit) }));
   const nextPage = () => onQueryChange((prev) => ({ ...prev, offset: prev.offset + prev.limit }));
   const summaryText = total == null || total === 0 ? `${rows.length} rows` : `${start + 1}\u2013${end} of ${total}`;
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const firstVirtualRow = virtualRows[0];
+  const lastVirtualRow = virtualRows[virtualRows.length - 1];
+  const paddingTop = firstVirtualRow ? Math.max(0, firstVirtualRow.start - headerHeight) : 0;
+  const paddingBottom = lastVirtualRow ? Math.max(0, rowVirtualizer.getTotalSize() - (lastVirtualRow.end - headerHeight)) : 0;
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    showHorizontalCue ? /* @__PURE__ */ jsxs2("div", { className: "qt-table-scroll-cue", "aria-hidden": "true", children: [
+      "Swipe to see more ",
+      /* @__PURE__ */ jsx2("span", { children: "\u2192" })
+    ] }) : null,
     /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -588,24 +709,40 @@ function DataTable(props) {
         className: cx2(
           "qt-table-wrap",
           loading && "qt-table-wrap--loading",
-          !!resizingField && "qt-table-wrap--resizing",
           classNames?.wrap
         ),
         onWheel: onTableWheel,
+        style: { maxHeight, overflowY: "auto" },
+        onScroll: () => {
+          const wrap = tableWrapRef.current;
+          if (!wrap) return;
+          setShowHorizontalCue(wrap.scrollWidth - wrap.clientWidth - wrap.scrollLeft > 2);
+        },
+        role: "region",
+        "aria-label": "Scrollable data table",
+        tabIndex: 0,
         children: [
           loading && /* @__PURE__ */ jsx2("div", { className: cx2("qt-loading-bar", classNames?.loadingBar), role: "progressbar", "aria-label": "loading" }),
-          /* @__PURE__ */ jsxs2("table", { className: cx2("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              ref: resizeGuideRef,
+              className: cx2("qt-resize-guide", classNames?.resizeGuide),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs2("table", { ref: tableRef, className: cx2("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
             /* @__PURE__ */ jsxs2("colgroup", { children: [
               renderedColumnNames.map((name) => {
                 const f = fieldByName.get(name);
                 const w = displayColumnWidthFor(name, f);
-                if (name === SELECTION_COLUMN) return /* @__PURE__ */ jsx2("col", { style: { width: w } }, name);
+                if (name === SELECTION_COLUMN) return /* @__PURE__ */ jsx2("col", { "data-qt-column": name, style: { width: w } }, name);
                 if (!f) return null;
-                return /* @__PURE__ */ jsx2("col", { style: { width: w } }, f.name);
+                return /* @__PURE__ */ jsx2("col", { "data-qt-column": f.name, style: { width: w } }, f.name);
               }),
               trailing && /* @__PURE__ */ jsx2("col", { style: { width: 40 } })
             ] }),
-            /* @__PURE__ */ jsx2("thead", { className: classNames?.thead, children: /* @__PURE__ */ jsxs2("tr", { className: classNames?.headerRow, children: [
+            /* @__PURE__ */ jsx2("thead", { ref: tableHeadRef, className: classNames?.thead, children: /* @__PURE__ */ jsxs2("tr", { className: classNames?.headerRow, children: [
               renderedColumnNames.map((name) => {
                 if (name === SELECTION_COLUMN) {
                   return /* @__PURE__ */ jsxs2(
@@ -616,11 +753,10 @@ function DataTable(props) {
                         "qt-th",
                         "qt-checkbox-cell",
                         dragSource === name && "qt-th--dragging",
-                        resizingField === name && "qt-th--resizing",
                         classNames?.th,
                         classNames?.checkboxCell
                       ),
-                      draggable: resizingField == null,
+                      draggable: true,
                       onDragStart: (e) => {
                         if (resizingFieldRef.current) {
                           e.preventDefault();
@@ -683,11 +819,10 @@ function DataTable(props) {
                       "qt-th",
                       sortable && "qt-th--sortable",
                       dragSource === f.name && "qt-th--dragging",
-                      resizingField === f.name && "qt-th--resizing",
                       classNames?.th
                     ),
                     style: f.select?.align ? { textAlign: f.select.align } : void 0,
-                    draggable: resizingField == null,
+                    draggable: true,
                     onDragStart: (e) => {
                       if (resizingFieldRef.current) {
                         e.preventDefault();
@@ -746,12 +881,17 @@ function DataTable(props) {
             ] }) }),
             /* @__PURE__ */ jsxs2("tbody", { className: classNames?.tbody, children: [
               rows.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-empty", classNames?.empty), children: emptyMessage ?? "No rows." }) }),
-              rows.map((row, i) => {
-                const id = rowId(row);
+              paddingTop > 0 && /* @__PURE__ */ jsx2("tr", { className: "qt-virtual-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, style: { height: paddingTop, padding: 0, border: 0 } }) }),
+              virtualRows.map((virtualRow) => {
+                const i = virtualRow.index;
+                const row = rows[i];
+                const id = rowIds[i] ?? null;
                 const selected = id != null && selection ? selection.isSelected(id) : false;
                 return /* @__PURE__ */ jsxs2(
                   "tr",
                   {
+                    "data-index": i,
+                    ref: rowVirtualizer.measureElement,
                     className: cx2("qt-row", selected && "qt-row--selected", classNames?.row, selected && classNames?.rowSelected),
                     children: [
                       renderedColumnNames.map((name) => {
@@ -804,9 +944,10 @@ function DataTable(props) {
                       trailing && /* @__PURE__ */ jsx2("td", { className: cx2("qt-cell", "qt-trailing-cell", classNames?.cell), children: trailing(row) })
                     ]
                   },
-                  id != null ? String(id) : i
+                  virtualRow.key
                 );
-              })
+              }),
+              paddingBottom > 0 && /* @__PURE__ */ jsx2("tr", { className: "qt-virtual-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, style: { height: paddingBottom, padding: 0, border: 0 } }) })
             ] }),
             /* @__PURE__ */ jsx2("tfoot", { children: /* @__PURE__ */ jsx2("tr", { className: cx2("qt-table-summary-row", classNames?.summaryRow), children: /* @__PURE__ */ jsx2("td", { colSpan: totalCols, className: cx2("qt-cell", "qt-table-summary-cell", classNames?.summaryCell), children: /* @__PURE__ */ jsxs2("div", { className: cx2("qt-table-summary", classNames?.summaryControls), children: [
               /* @__PURE__ */ jsx2(
@@ -979,6 +1120,7 @@ import {
   NULLARY_OPS as NULLARY_OPS2,
   aggOpNeedsField,
   aggOpsForField,
+  encodeQuery,
   filterValues as filterValuesFor,
   isGroupable,
   isMeasurable,
@@ -1047,7 +1189,7 @@ function FieldPicker({
             disabled: !enabled,
             className: enabled ? "qt-picker-item" : "qt-picker-item qt-picker-item--disabled",
             title: enabled ? f.name : "not useful as a filter (\u22641 distinct value)",
-            onMouseDown: (e) => {
+            onPointerDown: (e) => {
               if (!enabled) return;
               e.preventDefault();
               onPick(f);
@@ -1131,68 +1273,78 @@ function SavedQueriesModal({ saved, onClose, onLoad }) {
     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" }) })
-  ] }) });
+  return /* @__PURE__ */ jsx4("div", { className: "qt-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "qt-modal",
+      onClick: (e) => e.stopPropagation(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Saved queries",
+      children: [
+        /* @__PURE__ */ jsx4("h3", { className: "qt-modal-title", children: "Saved queries" }),
+        saved.loading ? /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "Loading\u2026" }) : saved.items.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "qt-muted", children: "None saved yet. Save the current query from the toolbar." }) : /* @__PURE__ */ jsx4("ul", { className: "qt-saved-list", children: saved.items.map((s) => {
+          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
@@ -1201,6 +1353,7 @@ var cx3 = (...parts) => parts.filter((p) => Boolean(p)).join(" ");
 var MAX_AUTO_REFRESH_POLLS = 1e3;
 var DEFAULT_AUTO_REFRESH_FREQUENCY_MS = 2e4;
 var DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS = 5 * 6e4;
+var SHARE_FEEDBACK_MS = 2e3;
 var AUTO_REFRESH_FREQUENCIES = [
   { label: "Every 5s", value: 5e3 },
   { label: "Every 10s", value: 1e4 },
@@ -1301,6 +1454,7 @@ function QueryBuilder({
 }) {
   const UNSAVED_QUERY_EDIT_ID = "__qt-unsaved-query__";
   const [showSaved, setShowSaved] = useState4(false);
+  const [shareCopied, setShareCopied] = useState4(false);
   const [showAutoRefresh, setShowAutoRefresh] = useState4(false);
   const [autoRefreshFrequencyMs, setAutoRefreshFrequencyMs] = useState4(DEFAULT_AUTO_REFRESH_FREQUENCY_MS);
   const [autoRefreshTurnOffAfterMs, setAutoRefreshTurnOffAfterMs] = useState4(DEFAULT_AUTO_REFRESH_TURN_OFF_AFTER_MS);
@@ -1359,6 +1513,20 @@ function QueryBuilder({
   const autoRefreshRef = useRef2(null);
   const autoRefreshPopoverRef = useRef2(null);
   const [autoRefreshPopoverAlignRight, setAutoRefreshPopoverAlignRight] = useState4(false);
+  const shareFeedbackTimerRef = useRef2(null);
+  useEffect4(
+    () => () => {
+      if (shareFeedbackTimerRef.current) clearTimeout(shareFeedbackTimerRef.current);
+    },
+    []
+  );
+  useEffect4(() => {
+    setShareCopied(false);
+    if (shareFeedbackTimerRef.current) {
+      clearTimeout(shareFeedbackTimerRef.current);
+      shareFeedbackTimerRef.current = null;
+    }
+  }, [api.query]);
   useEffect4(() => {
     if (activeSavedQuery) {
       setLastSavedId(activeSavedQuery.id);
@@ -1523,6 +1691,22 @@ function QueryBuilder({
       saveFailed(error);
     }
   }
+  async function shareQuery() {
+    if (typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    url.searchParams.set("q", encodeQuery(api.query));
+    try {
+      await navigator.clipboard.writeText(url.toString());
+      setShareCopied(true);
+      if (shareFeedbackTimerRef.current) clearTimeout(shareFeedbackTimerRef.current);
+      shareFeedbackTimerRef.current = setTimeout(() => {
+        setShareCopied(false);
+        shareFeedbackTimerRef.current = null;
+      }, SHARE_FEEDBACK_MS);
+    } catch {
+      window.prompt("Copy this query URL", url.toString());
+    }
+  }
   return /* @__PURE__ */ 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: [
@@ -1606,6 +1790,17 @@ function QueryBuilder({
           children: `Update Query '${lastSavedQuery?.name ?? "query"}'`
         }
       ) : null,
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: cx3("qt-btn", classNames?.button),
+          onClick: () => void shareQuery(),
+          title: "Copy a URL for this query",
+          "aria-live": "polite",
+          children: shareCopied ? "Copied!" : "Share"
+        }
+      ),
       /* @__PURE__ */ jsxs5("button", { type: "button", className: cx3("qt-btn", classNames?.button), onClick: () => setShowSaved(true), children: [
         "Saved",
         api.saved.items.length > 0 ? ` (${api.saved.items.length})` : ""
@@ -1764,6 +1959,41 @@ function QueryBuilder({
     !isCollapsed && showSaved ? /* @__PURE__ */ jsx5(SavedQueriesModal, { saved: api.saved, onClose: () => setShowSaved(false), onLoad: setLastSavedId }) : null
   ] });
 }
+function MoveButtons({
+  label,
+  position,
+  count,
+  disabled,
+  onMove
+}) {
+  if (count < 2) return null;
+  return /* @__PURE__ */ jsxs5("span", { className: "qt-chip-move-buttons", children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "qt-chip-move",
+        disabled: disabled || position === 0,
+        onClick: () => onMove(position - 1),
+        "aria-label": `Move ${label} earlier`,
+        title: "Move earlier",
+        children: "\u2190"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "qt-chip-move",
+        disabled: disabled || position === count - 1,
+        onClick: () => onMove(position + 1),
+        "aria-label": `Move ${label} later`,
+        title: "Move later",
+        children: "\u2192"
+      }
+    )
+  ] });
+}
 function SelectRow({
   api,
   fields,
@@ -1781,7 +2011,7 @@ function SelectRow({
   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) => {
+    rendered.map((name, position) => {
       const label = fieldLabelByName.get(name) ?? name;
       return /* @__PURE__ */ jsxs5(
         "span",
@@ -1824,6 +2054,16 @@ function SelectRow({
           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(
+              MoveButtons,
+              {
+                label,
+                position,
+                count: rendered.length,
+                disabled,
+                onMove: (nextPosition) => select.move(name, nextPosition)
+              }
+            ),
             /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => select.hide(name), disabled, children: "\u2715" })
           ]
         },
@@ -2058,6 +2298,9 @@ function OrderTermChip({
   disabled,
   updateTerm,
   removeTerm,
+  position,
+  count,
+  moveTerm,
   classNames,
   label
 }) {
@@ -2107,6 +2350,16 @@ function OrderTermChip({
             ]
           }
         ),
+        /* @__PURE__ */ jsx5(
+          MoveButtons,
+          {
+            label,
+            position,
+            count,
+            disabled,
+            onMove: moveTerm
+          }
+        ),
         /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: () => removeTerm(dataIndex), disabled, children: "\u2715" })
       ]
     }
@@ -2207,6 +2460,16 @@ function OrderRow({
           disabled,
           updateTerm,
           removeTerm,
+          position: pos,
+          count: rendered.length,
+          moveTerm: (toIndex) => {
+            const next = [...orderBy];
+            const fromIndex = next.findIndex((candidate) => candidate.field === f);
+            if (fromIndex === -1) return;
+            const [moved] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, moved);
+            setOrderBy(next);
+          },
           classNames,
           label: byName.get(f)?.label ?? f
         },
@@ -2237,34 +2500,38 @@ function WindowRow({
     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()
-      }
-    ),
+    /* @__PURE__ */ jsxs5("label", { className: "qt-qb-window-field", 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__ */ jsxs5("label", { className: "qt-qb-window-field", children: [
+      /* @__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",
       {
@@ -2331,7 +2598,7 @@ function MetricsRow({
   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) => {
+    rendered.map((id, position) => {
       const clause = byId.get(id);
       return /* @__PURE__ */ jsx5(
         MetricChip,
@@ -2350,7 +2617,10 @@ function MetricsRow({
           onChangeField: (field) => aggregations.update(id, { field }),
           onAddGroup: (field) => aggregations.update(id, { groupBy: [...clause.groupBy, field] }),
           onRemoveGroup: (field) => aggregations.update(id, { groupBy: clause.groupBy.filter((g) => g !== field) }),
-          onRemove: () => aggregations.remove(id)
+          onRemove: () => aggregations.remove(id),
+          position,
+          count: rendered.length,
+          onMove: (toIndex) => aggregations.move(id, toIndex)
         },
         id
       );
@@ -2380,7 +2650,10 @@ function MetricChip({
   onChangeField,
   onAddGroup,
   onRemoveGroup,
-  onRemove
+  onRemove,
+  position,
+  count,
+  onMove
 }) {
   const [addingGroup, setAddingGroup] = useState4(false);
   const byName = useMemo3(() => new Map(groupable.map((f) => [f.name, f])), [groupable]);
@@ -2457,6 +2730,16 @@ function MetricChip({
             }
           )
         ] }),
+        /* @__PURE__ */ jsx5(
+          MoveButtons,
+          {
+            label: clause.label ?? `${AGG_OP_LABELS[clause.op]} metric`,
+            position,
+            count,
+            disabled,
+            onMove
+          }
+        ),
         /* @__PURE__ */ jsx5("button", { type: "button", className: "qt-chip-x", onClick: onRemove, disabled, title: "Remove metric", children: "\u2715" })
       ]
     }