sqlui 0.1.54 → 0.1.56

data/client/resources/sqlui.js

@@ -4124,7 +4124,6 @@
    };
 
    var chrome$1 = typeof navigator != "undefined" && /Chrome\/(\d+)/.exec(navigator.userAgent);
-   typeof navigator != "undefined" && /Gecko\/\d+/.test(navigator.userAgent);
    var mac = typeof navigator != "undefined" && /Mac/.test(navigator.platform);
    var ie$1 = typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
    var brokenModifierNames = mac || chrome$1 && +chrome$1[1] < 57;
@@ -5758,6 +5757,7 @@
            this.curLine = null;
            this.breakAtStart = 0;
            this.pendingBuffer = 0 /* Buf.No */;
+           this.bufferMarks = [];
            // Set to false directly after a widget that covers the position after it
            this.atCursorPos = true;
            this.openStart = -1;
@@ -5780,20 +5780,20 @@
            }
            return this.curLine;
        }
-       flushBuffer(active) {
+       flushBuffer(active = this.bufferMarks) {
            if (this.pendingBuffer) {
                this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
                this.pendingBuffer = 0 /* Buf.No */;
            }
        }
        addBlockWidget(view) {
-           this.flushBuffer([]);
+           this.flushBuffer();
            this.curLine = null;
            this.content.push(view);
        }
        finish(openEnd) {
-           if (!openEnd)
-               this.flushBuffer([]);
+           if (this.pendingBuffer && openEnd <= this.bufferMarks.length)
+               this.flushBuffer();
            else
                this.pendingBuffer = 0 /* Buf.No */;
            if (!this.posCovered())
@@ -5813,8 +5813,9 @@
                            this.content[this.content.length - 1].breakAfter = 1;
                        else
                            this.breakAtStart = 1;
-                       this.flushBuffer([]);
+                       this.flushBuffer();
                        this.curLine = null;
+                       this.atCursorPos = true;
                        length--;
                        continue;
                    }
@@ -5856,7 +5857,7 @@
                else {
                    let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
                    let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
-                   let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+                   let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
                    let line = this.getLine();
                    if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
                        this.pendingBuffer = 0 /* Buf.No */;
@@ -5867,7 +5868,9 @@
                    }
                    line.append(wrapMarks(view, active), openStart);
                    this.atCursorPos = cursorAfter;
-                   this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+                   this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to || openStart > active.length ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+                   if (this.pendingBuffer)
+                       this.bufferMarks = active.slice();
                }
            }
            else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -9444,7 +9447,6 @@
            margin: 0,
            flexGrow: 2,
            flexShrink: 0,
-           minHeight: "100%",
            display: "block",
            whiteSpace: "pre",
            wordWrap: "normal",
@@ -9466,14 +9468,13 @@
        "&dark .cm-content": { caretColor: "white" },
        ".cm-line": {
            display: "block",
-           padding: "0 2px 0 4px"
-       },
-       ".cm-selectionLayer": {
-           zIndex: -1,
-           contain: "size style"
+           padding: "0 2px 0 6px"
        },
-       ".cm-selectionBackground": {
-           position: "absolute",
+       ".cm-layer": {
+           contain: "size style",
+           "& > *": {
+               position: "absolute"
+           }
        },
        "&light .cm-selectionBackground": {
            background: "#d9d9d9"
@@ -9488,8 +9489,6 @@
            background: "#233"
        },
        ".cm-cursorLayer": {
-           zIndex: 100,
-           contain: "size style",
            pointerEvents: "none"
        },
        "&.cm-focused .cm-cursorLayer": {
@@ -9501,7 +9500,6 @@
        "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
        "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
        ".cm-cursor, .cm-dropCursor": {
-           position: "absolute",
            borderLeft: "1.2px solid black",
            marginLeft: "-0.6px",
            pointerEvents: "none",
@@ -9595,6 +9593,21 @@
            display: "inline-block",
            verticalAlign: "top",
        },
+       ".cm-highlightSpace:before": {
+           content: "attr(data-display)",
+           position: "absolute",
+           pointerEvents: "none",
+           color: "#888"
+       },
+       ".cm-highlightTab": {
+           backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>')`,
+           backgroundSize: "auto 100%",
+           backgroundPosition: "right 90%",
+           backgroundRepeat: "no-repeat"
+       },
+       ".cm-trailingSpace": {
+           backgroundColor: "#ff332255"
+       },
        ".cm-button": {
            verticalAlign: "middle",
            color: "inherit",
@@ -9897,7 +9910,8 @@
            this.lastChange = 0;
            this.scrollTargets = [];
            this.intersection = null;
-           this.resize = null;
+           this.resizeScroll = null;
+           this.resizeContent = null;
            this.intersecting = false;
            this.gapIntersection = null;
            this.gaps = [];
@@ -9935,12 +9949,14 @@
            this.onPrint = this.onPrint.bind(this);
            this.onScroll = this.onScroll.bind(this);
            if (typeof ResizeObserver == "function") {
-               this.resize = new ResizeObserver(() => {
+               this.resizeScroll = new ResizeObserver(() => {
                    var _a;
                    if (((_a = this.view.docView) === null || _a === void 0 ? void 0 : _a.lastUpdate) < Date.now() - 75)
                        this.onResize();
                });
-               this.resize.observe(view.scrollDOM);
+               this.resizeScroll.observe(view.scrollDOM);
+               this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
+               this.resizeContent.observe(view.contentDOM);
            }
            this.addWindowListeners(this.win = view.win);
            this.start();
@@ -10259,11 +10275,12 @@
            win.document.removeEventListener("selectionchange", this.onSelectionChange);
        }
        destroy() {
-           var _a, _b, _c;
+           var _a, _b, _c, _d;
            this.stop();
            (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
            (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
-           (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
+           (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
+           (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
            for (let dom of this.scrollTargets)
                dom.removeEventListener("scroll", this.onScroll);
            this.removeWindowListeners(this.win);
@@ -10362,7 +10379,7 @@
            this.scrollDOM.className = "cm-scroller";
            this.scrollDOM.appendChild(this.contentDOM);
            this.announceDOM = document.createElement("div");
-           this.announceDOM.style.cssText = "position: absolute; top: -10000px";
+           this.announceDOM.style.cssText = "position: fixed; top: -10000px";
            this.announceDOM.setAttribute("aria-live", "polite");
            this.dom = document.createElement("div");
            this.dom.appendChild(this.announceDOM);
@@ -11447,51 +11464,21 @@
        return fallthrough;
    }
 
-   const CanHidePrimary = !browser.ios; // FIXME test IE
-   const selectionConfig = /*@__PURE__*/Facet.define({
-       combine(configs) {
-           return combineConfig(configs, {
-               cursorBlinkRate: 1200,
-               drawRangeCursor: true
-           }, {
-               cursorBlinkRate: (a, b) => Math.min(a, b),
-               drawRangeCursor: (a, b) => a || b
-           });
-       }
-   });
    /**
-   Returns an extension that hides the browser's native selection and
-   cursor, replacing the selection with a background behind the text
-   (with the `cm-selectionBackground` class), and the
-   cursors with elements overlaid over the code (using
-   `cm-cursor-primary` and `cm-cursor-secondary`).
-
-   This allows the editor to display secondary selection ranges, and
-   tends to produce a type of selection more in line with that users
-   expect in a text editor (the native selection styling will often
-   leave gaps between lines and won't fill the horizontal space after
-   a line when the selection continues past it).
-
-   It does have a performance cost, in that it requires an extra DOM
-   layout cycle for many updates (the selection is drawn based on DOM
-   layout information that's only available after laying out the
-   content).
+   Implementation of [`LayerMarker`](https://codemirror.net/6/docs/ref/#view.LayerMarker) that creates
+   a rectangle at a given set of coordinates.
    */
-   function drawSelection(config = {}) {
-       return [
-           selectionConfig.of(config),
-           drawSelectionPlugin,
-           hideNativeSelection,
-           nativeSelectionHidden.of(true)
-       ];
-   }
-   class Piece {
-       constructor(left, top, width, height, className) {
+   class RectangleMarker {
+       /**
+       Create a marker with the given class and dimensions. If `width`
+       is null, the DOM element will get no width style.
+       */
+       constructor(className, left, top, width, height) {
+           this.className = className;
            this.left = left;
            this.top = top;
            this.width = width;
            this.height = height;
-           this.className = className;
        }
        draw() {
            let elt = document.createElement("div");
@@ -11499,10 +11486,16 @@
            this.adjust(elt);
            return elt;
        }
+       update(elt, prev) {
+           if (prev.className != this.className)
+               return false;
+           this.adjust(elt);
+           return true;
+       }
        adjust(elt) {
            elt.style.left = this.left + "px";
            elt.style.top = this.top + "px";
-           if (this.width >= 0)
+           if (this.width != null)
                elt.style.width = this.width + "px";
            elt.style.height = this.height + "px";
        }
@@ -11510,82 +11503,26 @@
            return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
                this.className == p.className;
        }
-   }
-   const drawSelectionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
-       constructor(view) {
-           this.view = view;
-           this.rangePieces = [];
-           this.cursors = [];
-           this.measureReq = { read: this.readPos.bind(this), write: this.drawSel.bind(this) };
-           this.selectionLayer = view.scrollDOM.appendChild(document.createElement("div"));
-           this.selectionLayer.className = "cm-selectionLayer";
-           this.selectionLayer.setAttribute("aria-hidden", "true");
-           this.cursorLayer = view.scrollDOM.appendChild(document.createElement("div"));
-           this.cursorLayer.className = "cm-cursorLayer";
-           this.cursorLayer.setAttribute("aria-hidden", "true");
-           view.requestMeasure(this.measureReq);
-           this.setBlinkRate();
-       }
-       setBlinkRate() {
-           this.cursorLayer.style.animationDuration = this.view.state.facet(selectionConfig).cursorBlinkRate + "ms";
-       }
-       update(update) {
-           let confChanged = update.startState.facet(selectionConfig) != update.state.facet(selectionConfig);
-           if (confChanged || update.selectionSet || update.geometryChanged || update.viewportChanged)
-               this.view.requestMeasure(this.measureReq);
-           if (update.transactions.some(tr => tr.scrollIntoView))
-               this.cursorLayer.style.animationName = this.cursorLayer.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
-           if (confChanged)
-               this.setBlinkRate();
-       }
-       readPos() {
-           let { state } = this.view, conf = state.facet(selectionConfig);
-           let rangePieces = state.selection.ranges.map(r => r.empty ? [] : measureRange(this.view, r)).reduce((a, b) => a.concat(b));
-           let cursors = [];
-           for (let r of state.selection.ranges) {
-               let prim = r == state.selection.main;
-               if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
-                   let piece = measureCursor(this.view, r, prim);
-                   if (piece)
-                       cursors.push(piece);
-               }
-           }
-           return { rangePieces, cursors };
-       }
-       drawSel({ rangePieces, cursors }) {
-           if (rangePieces.length != this.rangePieces.length || rangePieces.some((p, i) => !p.eq(this.rangePieces[i]))) {
-               this.selectionLayer.textContent = "";
-               for (let p of rangePieces)
-                   this.selectionLayer.appendChild(p.draw());
-               this.rangePieces = rangePieces;
+       /**
+       Create a set of rectangles for the given selection range,
+       assigning them theclass`className`. Will create a single
+       rectangle for empty ranges, and a set of selection-style
+       rectangles covering the range's content (in a bidi-aware
+       way) for non-empty ones.
+       */
+       static forRange(view, className, range) {
+           if (range.empty) {
+               let pos = view.coordsAtPos(range.head, range.assoc || 1);
+               if (!pos)
+                   return [];
+               let base = getBase(view);
+               return [new RectangleMarker(className, pos.left - base.left, pos.top - base.top, null, pos.bottom - pos.top)];
            }
-           if (cursors.length != this.cursors.length || cursors.some((c, i) => !c.eq(this.cursors[i]))) {
-               let oldCursors = this.cursorLayer.children;
-               if (oldCursors.length !== cursors.length) {
-                   this.cursorLayer.textContent = "";
-                   for (const c of cursors)
-                       this.cursorLayer.appendChild(c.draw());
-               }
-               else {
-                   cursors.forEach((c, idx) => c.adjust(oldCursors[idx]));
-               }
-               this.cursors = cursors;
+           else {
+               return rectanglesForRange(view, className, range);
            }
        }
-       destroy() {
-           this.selectionLayer.remove();
-           this.cursorLayer.remove();
-       }
-   });
-   const themeSpec = {
-       ".cm-line": {
-           "& ::selection": { backgroundColor: "transparent !important" },
-           "&::selection": { backgroundColor: "transparent !important" }
-       }
-   };
-   if (CanHidePrimary)
-       themeSpec[".cm-line"].caretColor = "transparent !important";
-   const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
+   }
    function getBase(view) {
        let rect = view.scrollDOM.getBoundingClientRect();
        let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
@@ -11606,7 +11543,7 @@
            }
        return line;
    }
-   function measureRange(view, range) {
+   function rectanglesForRange(view, className, range) {
        if (range.to <= view.viewport.from || range.from >= view.viewport.to)
            return [];
        let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
@@ -11638,7 +11575,7 @@
            return pieces(top).concat(between).concat(pieces(bottom));
        }
        function piece(left, top, right, bottom) {
-           return new Piece(left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */, "cm-selectionBackground");
+           return new RectangleMarker(className, left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
        }
        function pieces({ top, bottom, horizontal }) {
            let pieces = [];
@@ -11690,13 +11627,174 @@
            return { top: y, bottom: y, horizontal: [] };
        }
    }
-   function measureCursor(view, cursor, primary) {
-       let pos = view.coordsAtPos(cursor.head, cursor.assoc || 1);
-       if (!pos)
-           return null;
-       let base = getBase(view);
-       return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
+   function sameMarker(a, b) {
+       return a.constructor == b.constructor && a.eq(b);
+   }
+   class LayerView {
+       constructor(view, layer) {
+           this.view = view;
+           this.layer = layer;
+           this.drawn = [];
+           this.measureReq = { read: this.measure.bind(this), write: this.draw.bind(this) };
+           this.dom = view.scrollDOM.appendChild(document.createElement("div"));
+           this.dom.classList.add("cm-layer");
+           if (layer.above)
+               this.dom.classList.add("cm-layer-above");
+           if (layer.class)
+               this.dom.classList.add(layer.class);
+           this.dom.setAttribute("aria-hidden", "true");
+           this.setOrder(view.state);
+           view.requestMeasure(this.measureReq);
+           if (layer.mount)
+               layer.mount(this.dom, view);
+       }
+       update(update) {
+           if (update.startState.facet(layerOrder) != update.state.facet(layerOrder))
+               this.setOrder(update.state);
+           if (this.layer.update(update, this.dom) || update.geometryChanged)
+               update.view.requestMeasure(this.measureReq);
+       }
+       setOrder(state) {
+           let pos = 0, order = state.facet(layerOrder);
+           while (pos < order.length && order[pos] != this.layer)
+               pos++;
+           this.dom.style.zIndex = String((this.layer.above ? 150 : -1) - pos);
+       }
+       measure() {
+           return this.layer.markers(this.view);
+       }
+       draw(markers) {
+           if (markers.length != this.drawn.length || markers.some((p, i) => !sameMarker(p, this.drawn[i]))) {
+               let old = this.dom.firstChild, oldI = 0;
+               for (let marker of markers) {
+                   if (marker.update && old && marker.constructor && this.drawn[oldI].constructor &&
+                       marker.update(old, this.drawn[oldI])) {
+                       old = old.nextSibling;
+                       oldI++;
+                   }
+                   else {
+                       this.dom.insertBefore(marker.draw(), old);
+                   }
+               }
+               while (old) {
+                   let next = old.nextSibling;
+                   old.remove();
+                   old = next;
+               }
+               this.drawn = markers;
+           }
+       }
+       destroy() {
+           if (this.layer.destroy)
+               this.layer.destroy(this.dom, this.view);
+           this.dom.remove();
+       }
+   }
+   const layerOrder = /*@__PURE__*/Facet.define();
+   /**
+   Define a layer.
+   */
+   function layer(config) {
+       return [
+           ViewPlugin.define(v => new LayerView(v, config)),
+           layerOrder.of(config)
+       ];
+   }
+
+   const CanHidePrimary = !browser.ios; // FIXME test IE
+   const selectionConfig = /*@__PURE__*/Facet.define({
+       combine(configs) {
+           return combineConfig(configs, {
+               cursorBlinkRate: 1200,
+               drawRangeCursor: true
+           }, {
+               cursorBlinkRate: (a, b) => Math.min(a, b),
+               drawRangeCursor: (a, b) => a || b
+           });
+       }
+   });
+   /**
+   Returns an extension that hides the browser's native selection and
+   cursor, replacing the selection with a background behind the text
+   (with the `cm-selectionBackground` class), and the
+   cursors with elements overlaid over the code (using
+   `cm-cursor-primary` and `cm-cursor-secondary`).
+
+   This allows the editor to display secondary selection ranges, and
+   tends to produce a type of selection more in line with that users
+   expect in a text editor (the native selection styling will often
+   leave gaps between lines and won't fill the horizontal space after
+   a line when the selection continues past it).
+
+   It does have a performance cost, in that it requires an extra DOM
+   layout cycle for many updates (the selection is drawn based on DOM
+   layout information that's only available after laying out the
+   content).
+   */
+   function drawSelection(config = {}) {
+       return [
+           selectionConfig.of(config),
+           cursorLayer,
+           selectionLayer,
+           hideNativeSelection,
+           nativeSelectionHidden.of(true)
+       ];
+   }
+   function configChanged(update) {
+       return update.startState.facet(selectionConfig) != update.startState.facet(selectionConfig);
    }
+   const cursorLayer = /*@__PURE__*/layer({
+       above: true,
+       markers(view) {
+           let { state } = view, conf = state.facet(selectionConfig);
+           let cursors = [];
+           for (let r of state.selection.ranges) {
+               let prim = r == state.selection.main;
+               if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
+                   let className = prim ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary";
+                   let cursor = r.empty ? r : EditorSelection.cursor(r.head, r.head > r.anchor ? -1 : 1);
+                   for (let piece of RectangleMarker.forRange(view, className, cursor))
+                       cursors.push(piece);
+               }
+           }
+           return cursors;
+       },
+       update(update, dom) {
+           if (update.transactions.some(tr => tr.scrollIntoView))
+               dom.style.animationName = dom.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
+           let confChange = configChanged(update);
+           if (confChange)
+               setBlinkRate(update.state, dom);
+           return update.docChanged || update.selectionSet || confChange;
+       },
+       mount(dom, view) {
+           setBlinkRate(view.state, dom);
+       },
+       class: "cm-cursorLayer"
+   });
+   function setBlinkRate(state, dom) {
+       dom.style.animationDuration = state.facet(selectionConfig).cursorBlinkRate + "ms";
+   }
+   const selectionLayer = /*@__PURE__*/layer({
+       above: false,
+       markers(view) {
+           return view.state.selection.ranges.map(r => r.empty ? [] : RectangleMarker.forRange(view, "cm-selectionBackground", r))
+               .reduce((a, b) => a.concat(b));
+       },
+       update(update, dom) {
+           return update.docChanged || update.selectionSet || update.viewportChanged || configChanged(update);
+       },
+       class: "cm-selectionLayer"
+   });
+   const themeSpec = {
+       ".cm-line": {
+           "& ::selection": { backgroundColor: "transparent !important" },
+           "&::selection": { backgroundColor: "transparent !important" }
+       }
+   };
+   if (CanHidePrimary)
+       themeSpec[".cm-line"].caretColor = "transparent !important";
+   const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
 
    const setDropCursorPos = /*@__PURE__*/StateEffect.define({
        map(pos, mapping) { return pos == null ? null : mapping.mapPos(pos); }
@@ -12456,6 +12554,17 @@
                    : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
                    above == (space.bottom - pos.bottom > pos.top - space.top))
                    above = !above;
+               let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
+               if (spaceVert < height && tView.resize !== false) {
+                   if (spaceVert < this.view.defaultLineHeight) {
+                       dom.style.top = Outside;
+                       continue;
+                   }
+                   dom.style.height = (height = spaceVert) + "px";
+               }
+               else if (dom.style.height) {
+                   dom.style.height = "";
+               }
                let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
                let right = left + width;
                if (tView.overlap !== true)
@@ -12499,7 +12608,8 @@
    });
    const baseTheme$4 = /*@__PURE__*/EditorView.baseTheme({
        ".cm-tooltip": {
-           zIndex: 100
+           zIndex: 100,
+           boxSizing: "border-box"
        },
        "&light .cm-tooltip": {
            border: "1px solid #bbb",
@@ -13484,8 +13594,8 @@
        /// Define a node type.
        static define(spec) {
            let props = spec.props && spec.props.length ? Object.create(null) : noProps;
-           let flags = (spec.top ? 1 /* Top */ : 0) | (spec.skipped ? 2 /* Skipped */ : 0) |
-               (spec.error ? 4 /* Error */ : 0) | (spec.name == null ? 8 /* Anonymous */ : 0);
+           let flags = (spec.top ? 1 /* NodeFlag.Top */ : 0) | (spec.skipped ? 2 /* NodeFlag.Skipped */ : 0) |
+               (spec.error ? 4 /* NodeFlag.Error */ : 0) | (spec.name == null ? 8 /* NodeFlag.Anonymous */ : 0);
            let type = new NodeType(spec.name || "", props, spec.id, flags);
            if (spec.props)
                for (let src of spec.props) {
@@ -13503,14 +13613,14 @@
        /// the prop isn't present on this node.
        prop(prop) { return this.props[prop.id]; }
        /// True when this is the top node of a grammar.
-       get isTop() { return (this.flags & 1 /* Top */) > 0; }
+       get isTop() { return (this.flags & 1 /* NodeFlag.Top */) > 0; }
        /// True when this node is produced by a skip rule.
-       get isSkipped() { return (this.flags & 2 /* Skipped */) > 0; }
+       get isSkipped() { return (this.flags & 2 /* NodeFlag.Skipped */) > 0; }
        /// Indicates whether this is an error node.
-       get isError() { return (this.flags & 4 /* Error */) > 0; }
+       get isError() { return (this.flags & 4 /* NodeFlag.Error */) > 0; }
        /// When true, this node type doesn't correspond to a user-declared
        /// named node, for example because it is used to cache repetition.
-       get isAnonymous() { return (this.flags & 8 /* Anonymous */) > 0; }
+       get isAnonymous() { return (this.flags & 8 /* NodeFlag.Anonymous */) > 0; }
        /// Returns true when this node's name or one of its
        /// [groups](#common.NodeProp^group) matches the given string.
        is(name) {
@@ -13543,7 +13653,7 @@
        }
    }
    /// An empty dummy node type to use when no actual type is available.
-   NodeType.none = new NodeType("", Object.create(null), 0, 8 /* Anonymous */);
+   NodeType.none = new NodeType("", Object.create(null), 0, 8 /* NodeFlag.Anonymous */);
    /// A node set holds a collection of node types. It is used to
    /// compactly represent trees by storing their type ids, rather than a
    /// full pointer to the type object, in a numeric array. Each parser
@@ -13752,7 +13862,7 @@
        /// which may have children grouped into subtrees with type
        /// [`NodeType.none`](#common.NodeType^none).
        balance(config = {}) {
-           return this.children.length <= 8 /* BranchFactor */ ? this :
+           return this.children.length <= 8 /* Balance.BranchFactor */ ? this :
                balanceRange(NodeType.none, this.children, this.positions, 0, this.children.length, 0, this.length, (children, positions, length) => new Tree(this.type, children, positions, length, this.propValues), config.makeTree || ((children, positions, length) => new Tree(NodeType.none, children, positions, length)));
        }
        /// Build a tree from a postfix-ordered buffer of node information,
@@ -13831,26 +13941,27 @@
            return pick;
        }
        /// @internal
-       slice(startI, endI, from, to) {
+       slice(startI, endI, from) {
            let b = this.buffer;
-           let copy = new Uint16Array(endI - startI);
+           let copy = new Uint16Array(endI - startI), len = 0;
            for (let i = startI, j = 0; i < endI;) {
                copy[j++] = b[i++];
                copy[j++] = b[i++] - from;
-               copy[j++] = b[i++] - from;
+               let to = copy[j++] = b[i++] - from;
                copy[j++] = b[i++] - startI;
+               len = Math.max(len, to);
            }
-           return new TreeBuffer(copy, to - from, this.set);
+           return new TreeBuffer(copy, len, this.set);
        }
    }
    function checkSide(side, pos, from, to) {
        switch (side) {
-           case -2 /* Before */: return from < pos;
-           case -1 /* AtOrBefore */: return to >= pos && from < pos;
-           case 0 /* Around */: return from < pos && to > pos;
-           case 1 /* AtOrAfter */: return from <= pos && to > pos;
-           case 2 /* After */: return to > pos;
-           case 4 /* DontCare */: return true;
+           case -2 /* Side.Before */: return from < pos;
+           case -1 /* Side.AtOrBefore */: return to >= pos && from < pos;
+           case 0 /* Side.Around */: return from < pos && to > pos;
+           case 1 /* Side.AtOrAfter */: return from <= pos && to > pos;
+           case 2 /* Side.After */: return to > pos;
+           case 4 /* Side.DontCare */: return true;
        }
    }
    function enterUnfinishedNodesBefore(node, pos) {
@@ -13940,10 +14051,10 @@
                    return null;
            }
        }
-       get firstChild() { return this.nextChild(0, 1, 0, 4 /* DontCare */); }
-       get lastChild() { return this.nextChild(this._tree.children.length - 1, -1, 0, 4 /* DontCare */); }
-       childAfter(pos) { return this.nextChild(0, 1, pos, 2 /* After */); }
-       childBefore(pos) { return this.nextChild(this._tree.children.length - 1, -1, pos, -2 /* Before */); }
+       get firstChild() { return this.nextChild(0, 1, 0, 4 /* Side.DontCare */); }
+       get lastChild() { return this.nextChild(this._tree.children.length - 1, -1, 0, 4 /* Side.DontCare */); }
+       childAfter(pos) { return this.nextChild(0, 1, pos, 2 /* Side.After */); }
+       childBefore(pos) { return this.nextChild(this._tree.children.length - 1, -1, pos, -2 /* Side.Before */); }
        enter(pos, side, mode = 0) {
            let mounted;
            if (!(mode & IterMode.IgnoreOverlays) && (mounted = this._tree.prop(NodeProp.mounted)) && mounted.overlay) {
@@ -13966,10 +14077,10 @@
            return this._parent ? this._parent.nextSignificantParent() : null;
        }
        get nextSibling() {
-           return this._parent && this.index >= 0 ? this._parent.nextChild(this.index + 1, 1, 0, 4 /* DontCare */) : null;
+           return this._parent && this.index >= 0 ? this._parent.nextChild(this.index + 1, 1, 0, 4 /* Side.DontCare */) : null;
        }
        get prevSibling() {
-           return this._parent && this.index >= 0 ? this._parent.nextChild(this.index - 1, -1, 0, 4 /* DontCare */) : null;
+           return this._parent && this.index >= 0 ? this._parent.nextChild(this.index - 1, -1, 0, 4 /* Side.DontCare */) : null;
        }
        cursor(mode = 0) { return new TreeCursor(this, mode); }
        get tree() { return this._tree; }
@@ -14031,24 +14142,24 @@
        }
    }
    class BufferNode {
+       get name() { return this.type.name; }
+       get from() { return this.context.start + this.context.buffer.buffer[this.index + 1]; }
+       get to() { return this.context.start + this.context.buffer.buffer[this.index + 2]; }
        constructor(context, _parent, index) {
            this.context = context;
            this._parent = _parent;
            this.index = index;
            this.type = context.buffer.set.types[context.buffer.buffer[index]];
        }
-       get name() { return this.type.name; }
-       get from() { return this.context.start + this.context.buffer.buffer[this.index + 1]; }
-       get to() { return this.context.start + this.context.buffer.buffer[this.index + 2]; }
        child(dir, pos, side) {
            let { buffer } = this.context;
            let index = buffer.findChild(this.index + 4, buffer.buffer[this.index + 3], dir, pos - this.context.start, side);
            return index < 0 ? null : new BufferNode(this.context, this, index);
        }
-       get firstChild() { return this.child(1, 0, 4 /* DontCare */); }
-       get lastChild() { return this.child(-1, 0, 4 /* DontCare */); }
-       childAfter(pos) { return this.child(1, pos, 2 /* After */); }
-       childBefore(pos) { return this.child(-1, pos, -2 /* Before */); }
+       get firstChild() { return this.child(1, 0, 4 /* Side.DontCare */); }
+       get lastChild() { return this.child(-1, 0, 4 /* Side.DontCare */); }
+       childAfter(pos) { return this.child(1, pos, 2 /* Side.After */); }
+       childBefore(pos) { return this.child(-1, pos, -2 /* Side.Before */); }
        enter(pos, side, mode = 0) {
            if (mode & IterMode.ExcludeBuffers)
                return null;
@@ -14060,7 +14171,7 @@
            return this._parent || this.context.parent.nextSignificantParent();
        }
        externalSibling(dir) {
-           return this._parent ? null : this.context.parent.nextChild(this.context.index + dir, dir, 0, 4 /* DontCare */);
+           return this._parent ? null : this.context.parent.nextChild(this.context.index + dir, dir, 0, 4 /* Side.DontCare */);
        }
        get nextSibling() {
            let { buffer } = this.context;
@@ -14074,7 +14185,7 @@
            let parentStart = this._parent ? this._parent.index + 4 : 0;
            if (this.index == parentStart)
                return this.externalSibling(-1);
-           return new BufferNode(this.context, this._parent, buffer.findChild(parentStart, this.index, -1, 0, 4 /* DontCare */));
+           return new BufferNode(this.context, this._parent, buffer.findChild(parentStart, this.index, -1, 0, 4 /* Side.DontCare */));
        }
        cursor(mode = 0) { return new TreeCursor(this, mode); }
        get tree() { return null; }
@@ -14083,8 +14194,8 @@
            let { buffer } = this.context;
            let startI = this.index + 4, endI = buffer.buffer[this.index + 3];
            if (endI > startI) {
-               let from = buffer.buffer[this.index + 1], to = buffer.buffer[this.index + 2];
-               children.push(buffer.slice(startI, endI, from, to));
+               let from = buffer.buffer[this.index + 1];
+               children.push(buffer.slice(startI, endI, from));
                positions.push(0);
            }
            return new Tree(this.type, children, positions, this.to - this.from);
@@ -14111,6 +14222,8 @@
    /// A tree cursor object focuses on a given node in a syntax tree, and
    /// allows you to move to adjacent nodes.
    class TreeCursor {
+       /// Shorthand for `.type.name`.
+       get name() { return this.type.name; }
        /// @internal
        constructor(node, 
        /// @internal
@@ -14134,8 +14247,6 @@
                this.yieldBuf(node.index);
            }
        }
-       /// Shorthand for `.type.name`.
-       get name() { return this.type.name; }
        yieldNode(node) {
            if (!node)
                return false;
@@ -14180,13 +14291,13 @@
        }
        /// Move the cursor to this node's first child. When this returns
        /// false, the node has no child, and the cursor has not been moved.
-       firstChild() { return this.enterChild(1, 0, 4 /* DontCare */); }
+       firstChild() { return this.enterChild(1, 0, 4 /* Side.DontCare */); }
        /// Move the cursor to this node's last child.
-       lastChild() { return this.enterChild(-1, 0, 4 /* DontCare */); }
+       lastChild() { return this.enterChild(-1, 0, 4 /* Side.DontCare */); }
        /// Move the cursor to the first child that ends after `pos`.
-       childAfter(pos) { return this.enterChild(1, pos, 2 /* After */); }
+       childAfter(pos) { return this.enterChild(1, pos, 2 /* Side.After */); }
        /// Move to the last child that starts before `pos`.
-       childBefore(pos) { return this.enterChild(-1, pos, -2 /* Before */); }
+       childBefore(pos) { return this.enterChild(-1, pos, -2 /* Side.Before */); }
        /// Move the cursor to the child around `pos`. If side is -1 the
        /// child may end at that position, when 1 it may start there. This
        /// will also enter [overlaid](#common.MountedTree.overlay)
@@ -14212,19 +14323,19 @@
            if (!this.buffer)
                return !this._tree._parent ? false
                    : this.yield(this._tree.index < 0 ? null
-                       : this._tree._parent.nextChild(this._tree.index + dir, dir, 0, 4 /* DontCare */, this.mode));
+                       : this._tree._parent.nextChild(this._tree.index + dir, dir, 0, 4 /* Side.DontCare */, this.mode));
            let { buffer } = this.buffer, d = this.stack.length - 1;
            if (dir < 0) {
                let parentStart = d < 0 ? 0 : this.stack[d] + 4;
                if (this.index != parentStart)
-                   return this.yieldBuf(buffer.findChild(parentStart, this.index, -1, 0, 4 /* DontCare */));
+                   return this.yieldBuf(buffer.findChild(parentStart, this.index, -1, 0, 4 /* Side.DontCare */));
            }
            else {
                let after = buffer.buffer[this.index + 3];
                if (after < (d < 0 ? buffer.buffer.length : buffer.buffer[this.stack[d] + 3]))
                    return this.yieldBuf(after);
            }
-           return d < 0 ? this.yield(this.buffer.parent.nextChild(this.buffer.index + dir, dir, 0, 4 /* DontCare */, this.mode)) : false;
+           return d < 0 ? this.yield(this.buffer.parent.nextChild(this.buffer.index + dir, dir, 0, 4 /* Side.DontCare */, this.mode)) : false;
        }
        /// Move to this node's next sibling, if any.
        nextSibling() { return this.sibling(1); }
@@ -14261,7 +14372,7 @@
            return true;
        }
        move(dir, enter) {
-           if (enter && this.enterChild(dir, 0, 4 /* DontCare */))
+           if (enter && this.enterChild(dir, 0, 4 /* Side.DontCare */))
                return true;
            for (;;) {
                if (this.sibling(dir))
@@ -14271,7 +14382,7 @@
            }
        }
        /// Move to the next node in a
-       /// [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR))
+       /// [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order,_NLR)
        /// traversal, going from a node to its first child or, if the
        /// current node is empty or `enter` is false, its next sibling or
        /// the next sibling of the first parent node that has one.
@@ -14387,17 +14498,17 @@
            let lookAheadAtStart = lookAhead;
            while (size < 0) {
                cursor.next();
-               if (size == -1 /* Reuse */) {
+               if (size == -1 /* SpecialRecord.Reuse */) {
                    let node = reused[id];
                    children.push(node);
                    positions.push(start - parentStart);
                    return;
                }
-               else if (size == -3 /* ContextChange */) { // Context change
+               else if (size == -3 /* SpecialRecord.ContextChange */) { // Context change
                    contextHash = id;
                    return;
                }
-               else if (size == -4 /* LookAhead */) {
+               else if (size == -4 /* SpecialRecord.LookAhead */) {
                    lookAhead = id;
                    return;
                }
@@ -14514,7 +14625,7 @@
                fork.next();
                while (fork.pos > startPos) {
                    if (fork.size < 0) {
-                       if (fork.size == -3 /* ContextChange */)
+                       if (fork.size == -3 /* SpecialRecord.ContextChange */)
                            localSkipped += 4;
                        else
                            break scan;
@@ -14550,10 +14661,10 @@
                buffer[--index] = start - bufferStart;
                buffer[--index] = id;
            }
-           else if (size == -3 /* ContextChange */) {
+           else if (size == -3 /* SpecialRecord.ContextChange */) {
                contextHash = id;
            }
-           else if (size == -4 /* LookAhead */) {
+           else if (size == -4 /* SpecialRecord.LookAhead */) {
                lookAhead = id;
            }
            return index;
@@ -14600,7 +14711,7 @@
        let total = 0;
        for (let i = from; i < to; i++)
            total += nodeSize(balanceType, children[i]);
-       let maxChild = Math.ceil((total * 1.5) / 8 /* BranchFactor */);
+       let maxChild = Math.ceil((total * 1.5) / 8 /* Balance.BranchFactor */);
        let localChildren = [], localPositions = [];
        function divide(children, positions, from, to, offset) {
            for (let i = from; i < to;) {
@@ -14661,16 +14772,16 @@
            this.to = to;
            this.tree = tree;
            this.offset = offset;
-           this.open = (openStart ? 1 /* Start */ : 0) | (openEnd ? 2 /* End */ : 0);
+           this.open = (openStart ? 1 /* Open.Start */ : 0) | (openEnd ? 2 /* Open.End */ : 0);
        }
        /// Whether the start of the fragment represents the start of a
        /// parse, or the end of a change. (In the second case, it may not
        /// be safe to reuse some nodes at the start, depending on the
        /// parsing algorithm.)
-       get openStart() { return (this.open & 1 /* Start */) > 0; }
+       get openStart() { return (this.open & 1 /* Open.Start */) > 0; }
        /// Whether the end of the fragment represents the end of a
        /// full-document parse, or the start of a change.
-       get openEnd() { return (this.open & 2 /* End */) > 0; }
+       get openEnd() { return (this.open & 2 /* Open.End */) > 0; }
        /// Create a set of fragments from a freshly parsed tree, or update
        /// an existing set of fragments by replacing the ones that overlap
        /// with a tree with content from the new tree. When `partial` is
@@ -14914,10 +15025,10 @@
                tags = [tags];
            for (let part of prop.split(" "))
                if (part) {
-                   let pieces = [], mode = 2 /* Normal */, rest = part;
+                   let pieces = [], mode = 2 /* Mode.Normal */, rest = part;
                    for (let pos = 0;;) {
                        if (rest == "..." && pos > 0 && pos + 3 == part.length) {
-                           mode = 1 /* Inherit */;
+                           mode = 1 /* Mode.Inherit */;
                            break;
                        }
                        let m = /^"(?:[^"\\]|\\.)*?"|[^\/!]+/.exec(rest);
@@ -14929,7 +15040,7 @@
                            break;
                        let next = part[pos++];
                        if (pos == part.length && next == "!") {
-                           mode = 0 /* Opaque */;
+                           mode = 0 /* Mode.Opaque */;
                            break;
                        }
                        if (next != "/")
@@ -14953,8 +15064,8 @@
            this.context = context;
            this.next = next;
        }
-       get opaque() { return this.mode == 0 /* Opaque */; }
-       get inherit() { return this.mode == 1 /* Inherit */; }
+       get opaque() { return this.mode == 0 /* Mode.Opaque */; }
+       get inherit() { return this.mode == 1 /* Mode.Inherit */; }
        sort(other) {
            if (!other || other.depth < this.depth) {
                this.next = other;
@@ -14965,7 +15076,7 @@
        }
        get depth() { return this.context ? this.context.length : 0; }
    }
-   Rule.empty = new Rule([], 2 /* Normal */, null);
+   Rule.empty = new Rule([], 2 /* Mode.Normal */, null);
    /// Define a [highlighter](#highlight.Highlighter) from an array of
    /// tag/class pairs. Classes associated with more specific tags will
    /// take precedence.
@@ -15052,7 +15163,7 @@
                if (cls)
                    cls += " ";
                cls += tagCls;
-               if (rule.mode == 1 /* Inherit */)
+               if (rule.mode == 1 /* Mode.Inherit */)
                    inheritedClass += (inheritedClass ? " " : "") + tagCls;
            }
            this.startSpan(cursor.from, cls);
@@ -15070,7 +15181,7 @@
                    if (rangeFrom < rangeTo && hasChild) {
                        while (cursor.from < rangeTo) {
                            this.highlightRange(cursor, rangeFrom, rangeTo, inheritedClass, highlighters);
-                           this.startSpan(Math.min(to, cursor.to), cls);
+                           this.startSpan(Math.min(rangeTo, cursor.to), cls);
                            if (cursor.to >= nextPos || !cursor.nextSibling())
                                break;
                        }
@@ -20723,6 +20834,7 @@
                maxWidth: "min(700px, 95vw)",
                minWidth: "250px",
                maxHeight: "10em",
+               height: "100%",
                listStyle: "none",
                margin: 0,
                padding: 0,
@@ -20789,7 +20901,8 @@
            display: "inline-block",
            textAlign: "center",
            paddingRight: ".6em",
-           opacity: "0.6"
+           opacity: "0.6",
+           boxSizing: "content-box"
        },
        ".cm-completionIcon-function, .cm-completionIcon-method": {
            "&:after": { content: "'ƒ'" }
@@ -24182,17 +24295,22 @@
      return match ? match[1] : identifier
    }
 
-   const drag = {
-     containerElement: null,
-     tableElement: null,
-     thElement: null,
-     colElement: null,
-     otherColWidths: null,
-     lastColElement: null
-   };
+   class Drag {
+     scrolled = null
+     scrollOffset = null
+     containerOffset = null
+     containerWidth = null
+     thElement = null
+     colElement = null
+     otherColWidths = null
+     lastColElement = null
+   }
+
+   let drag = new Drag();
 
    document.addEventListener('mousedown', (event) => {
      if (event.target.classList.contains('col-resizer')) {
+       drag = new Drag();
        event.preventDefault();
        const thElement = event.target.parentElement.parentElement;
        if (thElement.tagName.toLowerCase() !== 'th') {
@@ -24200,57 +24318,43 @@
        }
        const trElement = thElement.parentElement;
        const theadElement = trElement.parentElement;
-       drag.tableElement = theadElement.parentElement;
-       drag.containerElement = drag.tableElement.parentElement;
+       const tableElement = theadElement.parentElement;
+       const containerElement = tableElement.parentElement;
+       drag.containerWidth = containerElement.clientWidth;
+       drag.scrollOffset = containerElement.scrollLeft;
+       drag.scrolled = drag.scrollOffset > 0;
+       drag.containerOffset = containerElement.offsetLeft;
        drag.thElement = thElement;
        drag.colElement = document.getElementById(event.target.dataset.colId);
 
        const colElements = Array.from(drag.colElement.parentElement.childNodes);
        drag.lastColElement = colElements[colElements.length - 1];
-       drag.otherColWidths = [];
+       drag.otherColsWidth = 0;
        for (let i = 0; i < colElements.length - 1; i++) {
          if (colElements[i] !== drag.colElement) {
-           drag.otherColWidths.push(colElements[i].getBoundingClientRect().width);
+           drag.otherColsWidth += colElements[i].getBoundingClientRect().width;
          }
+         colElements[i].style.width = `${colElements[i].getBoundingClientRect().width}px`;
        }
-       colElements.forEach((element) => {
-         element.style.width = `${element.getBoundingClientRect().width}px`;
-       });
-       drag.tableElement.style.tableLayout = 'fixed';
+       tableElement.style.tableLayout = 'fixed';
      }
    });
 
    document.addEventListener('mouseup', (event) => {
-     drag.containerElement = null;
-     drag.tableElement = null;
-     drag.thElement = null;
-     drag.colElement = null;
-     drag.otherColWidths = null;
-     drag.lastColElement = null;
+     drag = new Drag();
    });
 
    document.addEventListener('mousemove', (event) => {
-     if (drag.colElement) {
-       const scrollOffset = drag.containerElement.scrollLeft;
-       const scrolled = scrollOffset > 0;
-       const containerOffset = drag.containerElement.offsetLeft;
-       const newColumnWidth = Math.max(0, scrollOffset + (event.clientX - containerOffset) - drag.thElement.offsetLeft);
-       if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
-
-       drag.colElement.style.width = `${newColumnWidth}px`;
-       let runningWidth = newColumnWidth;
-       drag.otherColWidths.forEach((width) => {
-         runningWidth += width;
-       });
-       let remainingWidth;
-       if (scrolled) {
-         remainingWidth = (scrollOffset + drag.containerElement.getBoundingClientRect().width) - runningWidth;
-       } else {
-         remainingWidth = Math.max(10, drag.containerElement.getBoundingClientRect().width - runningWidth);
-       }
-       drag.lastColElement.style.width = `${remainingWidth}px`;
-       runningWidth += remainingWidth;
-       drag.tableElement.style.width = `${runningWidth}px`;
+     if (!drag.colElement) return
+
+     const newColumnWidth = Math.max(0, drag.scrollOffset + (event.clientX - drag.containerOffset) - drag.thElement.offsetLeft);
+     if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
+
+     drag.colElement.style.width = `${newColumnWidth}px`;
+     if (drag.scrolled) {
+       drag.lastColElement.style.width = ((drag.scrollOffset + drag.containerWidth) - (newColumnWidth + drag.otherColsWidth)) + 'px';
+     } else {
+       drag.lastColElement.style.width = (Math.max(10, drag.containerWidth - (newColumnWidth + drag.otherColsWidth))) + 'px';
      }
    });
 
@@ -24261,7 +24365,9 @@
      if (!id) throw new Error('missing table id')
 
      const tableElement = document.createElement('table');
+     containerElement.appendChild(tableElement);
      if (id) tableElement.id = id;
+     tableElement.style.tableLayout = 'auto';
 
      const colgroupElement = document.createElement('colgroup');
      tableElement.appendChild(colgroupElement);
@@ -24269,51 +24375,55 @@
      const theadElement = document.createElement('thead');
      tableElement.appendChild(theadElement);
 
-     const tbodyElement = document.createElement('tbody');
-     tableElement.appendChild(tbodyElement);
-
      const headerTrElement = document.createElement('tr');
      theadElement.appendChild(headerTrElement);
 
-     const nonLastColElements = [];
-     columns.forEach(function (column, index) {
-       const headerElement = document.createElement('th');
-       headerTrElement.appendChild(headerElement);
-
-       const contentWrapperElement = document.createElement('div');
-       contentWrapperElement.classList.add('col-content-wrapper');
-       headerElement.appendChild(contentWrapperElement);
-
-       const nameElement = document.createElement('div');
-       nameElement.classList.add('col-name');
-       contentWrapperElement.appendChild(nameElement);
-
-       const colElement = document.createElement('col');
-       colElement.id = `${id}-col-${index}`;
-       colgroupElement.appendChild(colElement);
-       nonLastColElements.push(colElement);
-
-       const resizerElement = document.createElement('div');
-       resizerElement.classList.add('col-resizer');
-       resizerElement.dataset.colId = colElement.id;
-       contentWrapperElement.appendChild(resizerElement);
-
-       nameElement.innerText = column;
-     });
      if (columns.length > 0) {
+       const colElements = [];
+       columns.forEach(function (column, index) {
+         const headerElement = document.createElement('th');
+         headerTrElement.appendChild(headerElement);
+
+         const contentWrapperElement = document.createElement('div');
+         contentWrapperElement.classList.add('col-content-wrapper');
+         headerElement.appendChild(contentWrapperElement);
+
+         const nameElement = document.createElement('div');
+         nameElement.classList.add('col-name');
+         contentWrapperElement.appendChild(nameElement);
+
+         const colElement = document.createElement('col');
+         colElement.id = `${id}-col-${index}`;
+         colgroupElement.appendChild(colElement);
+         colElements.push(colElement);
+
+         const resizerElement = document.createElement('div');
+         resizerElement.classList.add('col-resizer');
+         resizerElement.dataset.colId = colElement.id;
+         contentWrapperElement.appendChild(resizerElement);
+
+         nameElement.innerText = column;
+       });
+
        headerTrElement.appendChild(document.createElement('th'));
        const lastColElement = document.createElement('col');
        lastColElement.style.width = '100%';
+       colElements.push(lastColElement);
+
+       let columnsWidth;
        function resize () {
-         let runningWidth = 0;
-         const colElements = Array.from(tableElement.getElementsByTagName('col'));
-         nonLastColElements.forEach((element, index) => {
-           runningWidth += element.getBoundingClientRect().width;
-         });
-         const remainingWidth = Math.max(10, containerElement.getBoundingClientRect().width - runningWidth);
-         colElements[colElements.length - 1].style.width = `${remainingWidth}px`;
-         runningWidth += remainingWidth;
-         tableElement.style.width = `${runningWidth}px`;
+         if (tableElement.style.tableLayout === 'auto') {
+           return
+         }
+         if (!columnsWidth) {
+           columnsWidth = 0;
+           colElements.slice(0, -1).forEach((element, index) => {
+             columnsWidth += element.getBoundingClientRect().width;
+           });
+         }
+         const remainingWidth = Math.max(10, containerElement.clientWidth - columnsWidth);
+         colElements.slice(-1)[0].style.width = `${remainingWidth}px`;
+         tableElement.style.width = `${columnsWidth + remainingWidth}px`;
        }
 
        const resizeObserver = new ResizeObserver(resize);
@@ -24328,7 +24438,26 @@
        });
        mutationObserver.observe(containerElement, { childList: true });
        colgroupElement.appendChild(lastColElement);
+
+       setTableBody(rows, tableElement, cellRenderer);
      }
+
+     return tableElement
+   }
+
+   function getTableBody (tableElement) {
+     return tableElement.getElementsByTagName('tbody')[0]
+   }
+
+   function setTableBody (rows, tableElement, cellRenderer) {
+     tableElement.style.tableLayout = 'auto';
+
+     let tbodyElement = getTableBody(tableElement);
+     tbodyElement?.parentElement?.removeChild(tbodyElement);
+
+     tbodyElement = document.createElement('tbody');
+     tableElement.appendChild(tbodyElement);
+
      let highlight = false;
      rows.forEach(function (row) {
        const rowElement = document.createElement('tr');
@@ -24348,11 +24477,12 @@
        });
        rowElement.appendChild(document.createElement('td'));
      });
-     containerElement.appendChild(tableElement);
    }
 
    /* global google */
 
+   const PAGE_SIZE = 500;
+
    function getSqlFromUrl (url) {
      const params = url.searchParams;
      if (params.has('file') && params.has('sql')) {
@@ -24418,6 +24548,14 @@
          copyTextToClipboard(toTsv(window.sqlFetch.result.columns, window.sqlFetch.result.rows));
        }
      });
+     addClickListener(document.getElementById('prev-button'), (event) => {
+       window.sqlFetch.page -= 1;
+       displaySqlFetch(window.sqlFetch);
+     });
+     addClickListener(document.getElementById('next-button'), (event) => {
+       window.sqlFetch.page += 1;
+       displaySqlFetch(window.sqlFetch);
+     });
      addClickListener(document.getElementById('submit-dropdown-button-download-csv'), () => {
        if (!window.sqlFetch?.result) return
 
@@ -24566,6 +24704,8 @@
        selected.style.display = 'none';
      });
 
+     setStatus('');
+
      switch (window.tab) {
        case 'query':
          selectResultTab(internal);
@@ -24707,7 +24847,6 @@
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('graph-box').style.display = 'flex';
-     document.getElementById('graph-status').style.display = 'flex';
      document.getElementById('fetch-sql-box').style.display = 'none';
      document.getElementById('cancel-button').style.display = 'none';
      updateDownloadButtons(window?.sqlFetch);
@@ -24720,7 +24859,6 @@
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('result-box').style.display = 'flex';
-     document.getElementById('result-status').style.display = 'flex';
      document.getElementById('fetch-sql-box').style.display = 'none';
      document.getElementById('cancel-button').style.display = 'none';
      focus(getSelection());
@@ -24732,17 +24870,15 @@
        selected.style.display = 'flex';
      });
 
-     if (window.savedLoaded) {
-       return
-     }
-
      const savedElement = document.getElementById('saved-box');
+     const saved = window.metadata.saved;
+     const numFiles = Object.keys(saved).length;
+     setStatus(`${numFiles} file${numFiles === 1 ? '' : 's'}`);
+
      if (savedElement.children.length > 0) {
        return
      }
-     const saved = window.metadata.saved;
-     const numFiles = Object.keys(saved).length;
-     setSavedStatus(`${numFiles} file${numFiles === 1 ? '' : 's'}`);
+
      Object.values(saved).forEach(file => {
        const viewUrl = new URL(window.location.origin + window.location.pathname);
        setActionInUrl(viewUrl, 'query');
@@ -24791,7 +24927,6 @@
 
        savedElement.appendChild(divElement);
      });
-     window.savedLoaded = true;
    }
 
    function submitAll (target, event) {
@@ -24847,27 +24982,25 @@
 
    function clearResult () {
      if (window.sqlFetch?.state === 'pending' || window.sqlFetch?.spinner === 'always') {
-       window.sqlFetch.state = 'aborted';
-       window.sqlFetch.spinner = 'never';
-       window.sqlFetch.fetchController.abort();
+       window.sqlFetch.abort();
        displaySqlFetch(window.sqlFetch);
        return
      }
      window.sqlFetch = null;
      clearSpinner();
      clearGraphBox();
-     clearGraphStatus();
+     clearStatus();
      clearResultBox();
-     clearResultStatus();
      disableDownloadButtons();
    }
 
-   function clearResultStatus () {
-     document.getElementById('result-status').innerText = '';
+   function clearStatus () {
+     document.getElementById('status-message').innerText = '';
    }
 
-   function clearGraphStatus () {
-     document.getElementById('graph-status').innerText = '';
+   function setStatus (message) {
+     const element = document.getElementById('status-message');
+     element.innerText = message;
    }
 
    function clearResultBox () {
@@ -24924,22 +25057,24 @@
        signal: sqlFetch.fetchController.signal
      })
        .then((response) => {
+         sqlFetch.endedAt = window.performance.now();
          const contentType = response.headers.get('content-type');
          if (contentType && contentType.indexOf('application/json') !== -1) {
            response.json().then((result) => {
              if (result?.query) {
                sqlFetch.state = 'success';
                sqlFetch.result = result;
+               sqlFetch.pageCount = Math.ceil(result.rows.length / sqlFetch.pageSize);
              } else {
                sqlFetch.state = 'error';
                if (result?.error) {
-                 sqlFetch.error_message = result.error;
-                 sqlFetch.error_details = result.stacktrace;
+                 sqlFetch.errorMessage = result.error;
+                 sqlFetch.errorDetails = result.stacktrace;
                } else if (result) {
-                 sqlFetch.error_message = 'failed to execute query';
-                 sqlFetch.error_details = result.toString();
+                 sqlFetch.errorMessage = 'failed to execute query';
+                 sqlFetch.errorDetails = result.toString();
                } else {
-                 sqlFetch.error_message = 'failed to execute query';
+                 sqlFetch.errorMessage = 'failed to execute query';
                }
              }
              displaySqlFetch(sqlFetch);
@@ -24947,17 +25082,18 @@
          } else {
            response.text().then((result) => {
              sqlFetch.state = 'error';
-             sqlFetch.error_message = 'failed to execute query';
-             sqlFetch.error_details = result;
+             sqlFetch.errorMessage = 'failed to execute query';
+             sqlFetch.errorDetails = result;
              displaySqlFetch(sqlFetch);
            });
          }
        })
        .catch(function (error) {
          if (sqlFetch.state === 'pending') {
+           sqlFetch.endedAt = window.performance.now();
            sqlFetch.state = 'error';
-           sqlFetch.error_message = 'failed to execute query';
-           sqlFetch.error_details = error;
+           sqlFetch.errorMessage = 'failed to execute query';
+           sqlFetch.errorDetails = error;
          }
          displaySqlFetch(sqlFetch);
        });
@@ -25026,18 +25162,36 @@
      }
    }
 
+   class SqlFetch {
+     constructor (sql, file, variables, selection) {
+       this.sql = sql;
+       this.file = file;
+       this.variables = variables;
+       this.selection = selection;
+       this.startedAt = window.performance.now();
+       this.endedAt = null;
+       this.state = 'pending';
+       this.fetchController = new AbortController();
+       this.spinner = 'never';
+       this.finished = null;
+       this.page = 0;
+       this.pageSize = PAGE_SIZE;
+       this.pageCount = null;
+     }
+
+     abort () {
+       this.state = 'aborted';
+       this.endedAt = window.performance.now();
+       this.spinner = 'never';
+       this.fetchController.abort();
+     }
+
+     getDuration () {
+       return (this.endedAt || window.performance.now()) - this.startedAt
+     }
+   }
    function buildSqlFetch (sql, file, variables, selection) {
-     const sqlFetch = {
-       fetchController: new AbortController(),
-       state: 'pending',
-       startedAt: window.performance.now(),
-       spinner: 'never',
-       finished: null,
-       sql,
-       file,
-       selection,
-       variables
-     };
+     const sqlFetch = new SqlFetch(sql, file, variables, selection);
 
      if (file) {
        const fileDetails = window.metadata.saved[file];
@@ -25053,6 +25207,50 @@
      return sqlFetch
    }
 
+   const createCellLink = function (link, value) {
+     const linkElement = document.createElement('a');
+     linkElement.href = link.template.replaceAll('{*}', encodeURIComponent(value));
+     linkElement.innerText = link.short_name;
+     linkElement.target = '_blank';
+
+     const abbrElement = document.createElement('abbr');
+     abbrElement.title = link.long_name;
+     abbrElement.appendChild(linkElement);
+
+     return abbrElement
+   };
+
+   const resultCellRenderer = function (rowElement, columnIndex, value) {
+     const column = window.sqlFetch.result.columns[columnIndex];
+     const columnType = window.sqlFetch.result.column_types[columnIndex];
+
+     if (value && window.metadata.columns[column]?.links?.length > 0) {
+       const linksElement = document.createElement('div');
+       window.metadata.columns[column].links.forEach((link) => {
+         linksElement.appendChild(createCellLink(link, value));
+       });
+
+       const textElement = document.createElement('div');
+       textElement.classList.add('cell-value');
+       textElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
+       textElement.innerText = value;
+
+       const wrapperElement = document.createElement('div');
+       wrapperElement.classList.add('cell-content-wrapper');
+       wrapperElement.appendChild(linksElement);
+       wrapperElement.appendChild(textElement);
+
+       const columnElement = document.createElement('td');
+       columnElement.appendChild(wrapperElement);
+       rowElement.appendChild(columnElement);
+     } else {
+       const cellElement = document.createElement('td');
+       cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
+       cellElement.innerText = value;
+       rowElement.appendChild(cellElement);
+     }
+   };
+
    function displaySqlFetchInResultTab (fetch) {
      if (fetch.state === 'pending' || fetch.spinner === 'always') {
        clearResultBox();
@@ -25072,13 +25270,13 @@
 
      if (fetch.state === 'aborted') {
        clearResultBox();
-       document.getElementById('result-status').innerText = 'query cancelled';
+       setStatus('query cancelled');
        return
      }
 
      if (fetch.state === 'error') {
        clearResultBox();
-       displaySqlFetchError('result-status', fetch.error_message, fetch.error_details);
+       displaySqlFetchError(fetch.errorMessage, fetch.errorDetails);
        return
      }
 
@@ -25086,58 +25284,29 @@
        throw new Error(`unexpected fetch sql request status: ${fetch.status}`)
      }
 
-     if (document.getElementById('result-table')) {
-       // Results already displayed.
-       return
-     }
-
-     clearResultBox();
-     displaySqlFetchResultStatus('result-status', fetch);
-
-     const createLink = function (link, value) {
-       const linkElement = document.createElement('a');
-       linkElement.href = link.template.replaceAll('{*}', encodeURIComponent(value));
-       linkElement.innerText = link.short_name;
-       linkElement.target = '_blank';
-
-       const abbrElement = document.createElement('abbr');
-       abbrElement.title = link.long_name;
-       abbrElement.appendChild(linkElement);
-
-       return abbrElement
-     };
-
-     const cellRenderer = function (rowElement, columnIndex, value) {
-       const column = fetch.result.columns[columnIndex];
-       const columnType = fetch.result.column_types[columnIndex];
-
-       if (value && window.metadata.columns[column]?.links?.length > 0) {
-         const linksElement = document.createElement('div');
-         window.metadata.columns[column].links.forEach((link) => {
-           linksElement.appendChild(createLink(link, value));
-         });
-
-         const textElement = document.createElement('div');
-         textElement.classList.add('cell-value');
-         textElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
-         textElement.innerText = value;
+     displaySqlFetchResultStatus(fetch);
 
-         const wrapperElement = document.createElement('div');
-         wrapperElement.classList.add('cell-content-wrapper');
-         wrapperElement.appendChild(linksElement);
-         wrapperElement.appendChild(textElement);
+     const pageStart = fetch.page * fetch.pageSize;
+     const rows = fetch.result.rows.slice(pageStart, pageStart + fetch.pageSize);
 
-         const columnElement = document.createElement('td');
-         columnElement.appendChild(wrapperElement);
-         rowElement.appendChild(columnElement);
-       } else {
-         const cellElement = document.createElement('td');
-         cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
-         cellElement.innerText = value;
-         rowElement.appendChild(cellElement);
+     let tableElement = document.getElementById('result-table');
+     if (tableElement) {
+       const resultBody = getTableBody(tableElement);
+       if (resultBody.dataset.page === fetch.page) {
+         // Results already displayed.
+         return
        }
-     };
-     createTable(document.getElementById('result-box'), fetch.result.columns, fetch.result.rows, 'result-table', cellRenderer);
+       setTableBody(rows, tableElement, resultCellRenderer);
+     } else {
+       clearResultBox();
+       tableElement = createTable(
+         document.getElementById('result-box'),
+         fetch.result.columns,
+         rows,
+         'result-table',
+         resultCellRenderer);
+     }
+     tableElement.setAttribute('data-page', fetch.page);
    }
 
    function disableDownloadButtons () {
@@ -25169,8 +25338,7 @@
      }
    }
 
-   function displaySqlFetchError (statusElementId, message, details) {
-     const statusElement = document.getElementById(statusElementId);
+   function displaySqlFetchError (message, details) {
      let statusMessage = 'error: ' + message;
      if (statusMessage.length > 90) {
        statusMessage = statusMessage.substring(0, 90) + '…';
@@ -25179,7 +25347,7 @@
        console.log(`${message}\n${details}`);
        statusMessage += ' (check console)';
      }
-     statusElement.innerText = statusMessage;
+     setStatus(statusMessage);
    }
 
    function clearSpinner () {
@@ -25229,13 +25397,13 @@
 
      if (fetch.state === 'aborted') {
        clearGraphBox();
-       document.getElementById('graph-status').innerText = 'query cancelled';
+       setStatus('query cancelled');
        return
      }
 
      if (fetch.state === 'error') {
        clearGraphBox();
-       displaySqlFetchError('graph-status', fetch.error_message, fetch.error_details);
+       displaySqlFetchError(fetch.errorMessage, fetch.errorDetails);
        return
      }
 
@@ -25243,7 +25411,7 @@
        throw new Error(`unexpected fetch sql request status: ${fetch.status}`)
      }
      clearGraphBox();
-     displaySqlFetchResultStatus('graph-status', fetch);
+     displaySqlFetchResultStatus(fetch);
 
      if (!fetch.result.rows) {
        return
@@ -25282,24 +25450,30 @@
      chart.draw(dataTable, options);
    }
 
-   function displaySqlFetchResultStatus (statusElementId, sqlFetch) {
+   function displaySqlFetchResultStatus (sqlFetch) {
      const result = sqlFetch.result;
-     const statusElement = document.getElementById(statusElementId);
-     const elapsed = Math.round(100 * (window.performance.now() - sqlFetch.startedAt) / 1000.0) / 100;
+     const elapsed = Math.round(100 * (sqlFetch.getDuration() / 1000.0)) / 100;
 
+     let message;
      if (result.total_rows === 1) {
-       statusElement.innerText = `${result.total_rows} row (${elapsed}s)`;
+       message = `${result.total_rows} row (${elapsed}s)`;
      } else {
-       statusElement.innerText = `${result.total_rows.toLocaleString()} rows (${elapsed}s)`;
+       message = `${result.total_rows.toLocaleString()} rows (${elapsed}s)`;
      }
 
      if (result.total_rows > result.rows.length) {
-       statusElement.innerText += ` (truncated to ${result.rows.length})`;
+       message += ` (truncated to ${result.rows.length})`;
+     }
+     setStatus(message);
+
+     const pageCountBox = document.getElementById('page-count-box');
+     pageCountBox.style.display = 'flex';
+     pageCountBox.innerText = `${sqlFetch.page + 1} of ${sqlFetch.pageCount}`;
+     if (sqlFetch.pageCount > 1) {
+       document.getElementById('pagination-box').style.display = 'flex';
+       document.getElementById('next-button').disabled = sqlFetch.page + 1 === sqlFetch.pageCount;
+       document.getElementById('prev-button').disabled = sqlFetch.page === 0;
      }
-   }
-
-   function setSavedStatus (status) {
-     document.getElementById('saved-status').innerText = status;
    }
 
    window.addEventListener('popstate', function (event) {