argus-table 0.2.1 → 0.3.0

package/dist/controllers/row-measure.js

@@ -0,0 +1,121 @@
+// src/controllers/row-measure.ts
+/**
+* Rows of different heights (`rowHeight: 'auto'`): reads the heights of the
+* rendered body rows and of the pinned row groups once their content has
+* rendered, and watches them for changes the table doesn't render (an image
+* loading, a web font, a framework component updating), which request an
+* update that reads them again. Pooled rows show other rows as the body
+* scrolls, so every update reads every rendered row: one that now shows a row
+* of the same height doesn't resize, and the observer wouldn't report it.
+*/
+var RowMeasure = class {
+	#host;
+	#options;
+	#observer;
+	#observed = /* @__PURE__ */ new Set();
+	#pinned = {
+		top: 0,
+		bottom: 0
+	};
+	/** The row each body row element showed when it was last read. */
+	#read = /* @__PURE__ */ new WeakMap();
+	/** Read every row next time, not only those that show another row now. */
+	#all = true;
+	constructor(host, options) {
+		this.#host = host;
+		this.#options = options;
+	}
+	/** The pinned groups' heights from the last `read()`. */
+	get pinned() {
+		return this.#pinned;
+	}
+	/**
+	* The next `read()` reads every row: their content may have changed size
+	* (new data or columns, a resize, content that grew).
+	*/
+	invalidate() {
+		this.#all = true;
+	}
+	/**
+	* Reads the rows in `root` (the shadow root): the body rows' heights as
+	* `[index, px]`, and whether the pinned groups changed height. Scrolling,
+	* only the pooled rows that now show another row are read.
+	*/
+	read(root) {
+		const observer = this.#observer ??= new ResizeObserver(this.#onResize);
+		for (const element of this.#observed) if (!element.isConnected) {
+			observer.unobserve(element);
+			this.#observed.delete(element);
+		}
+		const rows = [];
+		const due = [];
+		for (const row of root.querySelectorAll("[part~=\"body\"] > .row")) {
+			this.#observe(row);
+			const index = this.#options.bodyIndex(row);
+			if (index === void 0) this.#read.delete(row);
+			else if (this.#all || this.#read.get(row) !== index) due.push([row, index]);
+		}
+		this.#all = false;
+		for (const [row] of due) row.setAttribute("data-measure-row", "");
+		for (const [row, index] of due) {
+			rows.push([index, row.getBoundingClientRect().height]);
+			this.#read.set(row, index);
+		}
+		for (const [row] of due) row.removeAttribute("data-measure-row");
+		const group = (side) => {
+			const element = root.querySelector(`.pinned[data-side="${side}"]`);
+			if (element) this.#observe(element);
+			return element ? element.getBoundingClientRect().height : 0;
+		};
+		const pinned = {
+			top: group("top"),
+			bottom: group("bottom")
+		};
+		const pinnedChanged = Math.abs(pinned.top - this.#pinned.top) > .01 || Math.abs(pinned.bottom - this.#pinned.bottom) > .01;
+		if (pinnedChanged) this.#pinned = pinned;
+		return {
+			rows,
+			pinnedChanged
+		};
+	}
+	/** Stops watching (fixed row heights again, or the table left the page). */
+	stop() {
+		this.#observer?.disconnect();
+		this.#observed.clear();
+		this.#pinned = {
+			top: 0,
+			bottom: 0
+		};
+		this.#all = true;
+	}
+	#observe(element) {
+		if (this.#observed.has(element)) return;
+		this.#observed.add(element);
+		this.#observer?.observe(element);
+	}
+	/** Requests an update only for a height the table doesn't have yet. */
+	#onResize = (entries) => {
+		const { bodyIndex, sizeOf, minimum } = this.#options;
+		for (const entry of entries) {
+			const target = entry.target;
+			if (!target.isConnected) continue;
+			const px = entry.borderBoxSize[0]?.blockSize ?? target.getBoundingClientRect().height;
+			let known;
+			if (target.classList.contains("pinned")) known = target.getAttribute("data-side") === "top" ? this.#pinned.top : this.#pinned.bottom;
+			else {
+				const index = bodyIndex(target);
+				if (index === void 0) continue;
+				known = sizeOf(index);
+				if (px < minimum() || px <= known + .01) continue;
+			}
+			if (Math.abs(px - known) > .01) {
+				this.#all = true;
+				this.#host.requestUpdate();
+				return;
+			}
+		}
+	};
+};
+export { RowMeasure };
+
+//# sourceMappingURL=row-measure.js.map

package/dist/controllers/row-measure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-measure.js","names":[],"sources":["../../src/controllers/row-measure.ts"],"sourcesContent":["import type { ReactiveControllerHost } from 'lit';\n\n/** The heights of the pinned row groups, in px. */\nexport interface PinnedHeights {\n  top: number;\n  bottom: number;\n}\n\nexport interface RowMeasureOptions {\n  /** A body row element's index in the row order; `undefined` to leave it out (a row still loading). */\n  bodyIndex: (row: Element) => number | undefined;\n  /** The height the virtualizer has for a body row now. */\n  sizeOf: (index: number) => number;\n  /** The least a row is (the row height). */\n  minimum: () => number;\n}\n\n/**\n * Rows of different heights (`rowHeight: 'auto'`): reads the heights of the\n * rendered body rows and of the pinned row groups once their content has\n * rendered, and watches them for changes the table doesn't render (an image\n * loading, a web font, a framework component updating), which request an\n * update that reads them again. Pooled rows show other rows as the body\n * scrolls, so every update reads every rendered row: one that now shows a row\n * of the same height doesn't resize, and the observer wouldn't report it.\n */\nexport class RowMeasure {\n  readonly #host: ReactiveControllerHost;\n  readonly #options: RowMeasureOptions;\n  #observer: ResizeObserver | undefined;\n  readonly #observed = new Set<Element>();\n  #pinned: PinnedHeights = { top: 0, bottom: 0 };\n  /** The row each body row element showed when it was last read. */\n  #read = new WeakMap<Element, number>();\n  /** Read every row next time, not only those that show another row now. */\n  #all = true;\n\n  constructor(host: ReactiveControllerHost, options: RowMeasureOptions) {\n    this.#host = host;\n    this.#options = options;\n  }\n\n  /** The pinned groups' heights from the last `read()`. */\n  get pinned(): PinnedHeights {\n    return this.#pinned;\n  }\n\n  /**\n   * The next `read()` reads every row: their content may have changed size\n   * (new data or columns, a resize, content that grew).\n   */\n  invalidate(): void {\n    this.#all = true;\n  }\n\n  /**\n   * Reads the rows in `root` (the shadow root): the body rows' heights as\n   * `[index, px]`, and whether the pinned groups changed height. Scrolling,\n   * only the pooled rows that now show another row are read.\n   */\n  read(root: ParentNode): { rows: [number, number][]; pinnedChanged: boolean } {\n    const observer = (this.#observer ??= new ResizeObserver(this.#onResize));\n    for (const element of this.#observed) {\n      if (!element.isConnected) {\n        observer.unobserve(element);\n        this.#observed.delete(element);\n      }\n    }\n    const rows: [number, number][] = [];\n    const due: [Element, number][] = [];\n    for (const row of root.querySelectorAll('[part~=\"body\"] > .row')) {\n      this.#observe(row);\n      const index = this.#options.bodyIndex(row);\n      if (index === undefined) {\n        this.#read.delete(row);\n      } else if (this.#all || this.#read.get(row) !== index) {\n        due.push([row, index]);\n      }\n    }\n    this.#all = false;\n    // Body rows render at least their measured height (on the px grid): drop it\n    // for one synchronous read, so rows can shrink too. Never painted.\n    for (const [row] of due) row.setAttribute('data-measure-row', '');\n    for (const [row, index] of due) {\n      rows.push([index, row.getBoundingClientRect().height]);\n      this.#read.set(row, index);\n    }\n    for (const [row] of due) row.removeAttribute('data-measure-row');\n    const group = (side: 'top' | 'bottom') => {\n      const element = root.querySelector(`.pinned[data-side=\"${side}\"]`);\n      if (element) this.#observe(element);\n      return element ? element.getBoundingClientRect().height : 0;\n    };\n    const pinned = { top: group('top'), bottom: group('bottom') };\n    const pinnedChanged =\n      Math.abs(pinned.top - this.#pinned.top) > 0.01 ||\n      Math.abs(pinned.bottom - this.#pinned.bottom) > 0.01;\n    if (pinnedChanged) this.#pinned = pinned;\n    return { rows, pinnedChanged };\n  }\n\n  /** Stops watching (fixed row heights again, or the table left the page). */\n  stop(): void {\n    this.#observer?.disconnect();\n    this.#observed.clear();\n    this.#pinned = { top: 0, bottom: 0 };\n    this.#all = true;\n  }\n\n  #observe(element: Element): void {\n    if (this.#observed.has(element)) return;\n    this.#observed.add(element);\n    this.#observer?.observe(element);\n  }\n\n  /** Requests an update only for a height the table doesn't have yet. */\n  readonly #onResize = (entries: ResizeObserverEntry[]) => {\n    const { bodyIndex, sizeOf, minimum } = this.#options;\n    for (const entry of entries) {\n      const target = entry.target;\n      if (!target.isConnected) continue;\n      const px = entry.borderBoxSize[0]?.blockSize ?? target.getBoundingClientRect().height;\n      let known: number | undefined;\n      if (target.classList.contains('pinned')) {\n        known = target.getAttribute('data-side') === 'top' ? this.#pinned.top : this.#pinned.bottom;\n      } else {\n        const index = bodyIndex(target);\n        if (index === undefined) continue;\n        known = sizeOf(index);\n        // Rows render at least their known height: only growing shows here.\n        if (px < minimum() || px <= known + 0.01) continue;\n      }\n      if (Math.abs(px - known) > 0.01) {\n        this.#all = true;\n        this.#host.requestUpdate();\n        return;\n      }\n    }\n  };\n}\n"],"mappings":"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"}

package/dist/controllers/virtual-controller.js

@@ -1,9 +1,18 @@
 import { RowPool } from "../core/src/virtual/row-pool.js";
+import { RowSizes } from "../core/src/virtual/row-sizes.js";
 import { ScrollScale } from "../core/src/virtual/scroll-scale.js";
 import { maxVisibleRows, steadyWindow } from "../core/src/virtual/steady-window.js";
 import { VirtualizerController } from "@tanstack/lit-virtual";
 // src/controllers/virtual-controller.ts
 /**
+* Engines place elements in a body taller than this (2^24 px) only to 2 px:
+* positions are 32-bit floats. Measured rows are whole px below it and an even
+* number of px above it, so every row starts on the grid and they stay flush.
+*/
+var COARSE_BODY = 16e6;
+/** How long scrolling has to be quiet before a held correction is written (see `#hold`). */
+var HOLD_MS = 150;
+/**
 * Row virtualization (TanStack Virtual) plus the row pool: which rows render,
 * where, and which pool slot's DOM each one uses. The virtualizer registers itself
 * with the host and requests updates on scroll.
@@ -16,6 +25,16 @@ import { VirtualizerController } from "@tanstack/lit-virtual";
 * scroll position (`start` minus the difference between the logical and the
 * physical offset). Scroll through this controller (`scrollBy`, `reveal`,
 * `scrollToIndex`): physical px no longer match rows once the body is scaled.
+*
+* Rows of different heights (`auto`): TanStack's own measuring recomputes every
+* row below a measured one, too slow for a million rows, so in this mode the
+* virtualizer sits idle (no rows) and the controller does its part: the window
+* from `RowSizes` (heights by index, O(log n) offsets), a scroll listener that
+* re-renders when the window moves, and anchoring. Heights follow row ids, so
+* a sort or filter keeps them. A measured row above the top row would move
+* the rows in view: unscaled, the rows render shifted by the difference until
+* scrolling stops (`#hold`); scaled, the mapping pivots at the current offset.
+* Neither writes the scroll position while the user scrolls.
 */
 var VirtualController = class {
 	#virtual;
@@ -30,10 +49,31 @@ var VirtualController = class {
 		rowHeight: 40,
 		overscan: 6,
 		rowIdAt: String,
-		cap: Infinity
+		cap: () => Infinity
 	};
 	/** A logical offset to restore after the update, once the body has its new height. */
 	#anchor;
+	#sizes = new RowSizes();
+	/** Measured heights by row id (as read), so they follow rows through a sort or filter. */
+	#heights = /* @__PURE__ */ new Map();
+	/** Rows are whole multiples of this many px (see `COARSE_BODY`). */
+	#quantum = 1;
+	/**
+	* Unscaled: the logical offset less the scroller's. Rows measured above the
+	* top row would move the rows in view; instead of writing the scroll position
+	* (which cancels a wheel or touch scroll in progress, in WebKit at once) the
+	* rows render shifted by this much, and it is written once scrolling has been
+	* quiet for `HOLD_MS`.
+	*/
+	#hold = 0;
+	#holdTimer;
+	/** The `order` the sizes are indexed for. */
+	#order;
+	/** The visible rows last rendered, and the logical offset they were rendered for. */
+	#rendered;
+	/** The scroller this controller listens to (auto mode). */
+	#listening;
+	#resizeObserver;
 	constructor(host, getScrollElement) {
 		this.#host = host;
 		this.#getScrollElement = getScrollElement;
@@ -85,7 +125,7 @@ var VirtualController = class {
 	#top(element) {
 		const top = element.scrollTop;
 		const scale = this.#scale;
-		return scale.scaled ? scale.toLogical(top, element.scrollHeight - element.clientHeight) : top;
+		return scale.scaled ? scale.toLogical(top, element.scrollHeight - element.clientHeight) : top + this.#hold;
 	}
 	/**
 	* Scrolls to a logical offset. `round` rounds the physical one, so that a
@@ -94,6 +134,7 @@ var VirtualController = class {
 	#write(element, logical, behavior, round) {
 		const scale = this.#scale;
 		if (!scale.scaled) {
+			this.#dropHold();
 			element.scrollTo({
 				top: logical,
 				behavior
@@ -112,7 +153,22 @@ var VirtualController = class {
 	configure(next) {
 		const prev = this.#config;
 		this.#config = next;
-		if (next.count !== prev.count || next.overscan !== prev.overscan || next.rowHeight !== prev.rowHeight) {
+		if (next.auto) {
+			this.#configureAuto(next.auto, prev);
+			return;
+		}
+		if (prev.auto) {
+			this.#heights.clear();
+			this.#sizes.reset(0, next.rowHeight);
+			this.#order = void 0;
+			this.#rendered = void 0;
+			this.#dropHold();
+			this.#virtual.setOptions({
+				count: next.count,
+				overscan: next.overscan
+			});
+			this.#virtual.getVirtualizer().measure();
+		} else if (next.count !== prev.count || next.overscan !== prev.overscan || next.rowHeight !== prev.rowHeight) {
 			this.#virtual.setOptions({
 				count: next.count,
 				overscan: next.overscan
@@ -121,21 +177,135 @@ var VirtualController = class {
 		}
 		const wasScaled = this.#scale.excess > 0;
 		const offset = this.#virtual.getVirtualizer().scrollOffset;
-		if (this.#scale.configure(next.count * next.rowHeight, next.cap)) {
+		const logical = next.count * next.rowHeight;
+		if (this.#scale.configure(logical, next.cap(logical))) {
 			if ((wasScaled || this.#scale.scaled) && offset !== null && offset > 0) this.#anchor = offset;
 		}
 	}
+	#configureAuto(auto, prev) {
+		const next = this.#config;
+		if (!prev.auto) this.#virtual.setOptions({ count: 0 });
+		const sizes = this.#sizes;
+		if (!prev.auto || next.rowHeight !== prev.rowHeight) {
+			this.#heights.clear();
+			this.#order = void 0;
+		}
+		const reset = () => {
+			sizes.reset(next.count, this.#fit(0), this.#known(auto, next.count));
+		};
+		if (auto.order !== this.#order) {
+			this.#order = auto.order;
+			reset();
+		} else if (next.count !== sizes.count) sizes.resize(next.count);
+		const quantum = this.#quantumFor(sizes.total);
+		if (quantum !== this.#quantum) {
+			this.#quantum = quantum;
+			reset();
+		}
+		const element = this.#element;
+		const wasScaled = this.#scale.excess > 0;
+		const offset = element ? this.#top(element) : 0;
+		const logical = sizes.total;
+		if (this.#scale.configure(logical, next.cap(logical))) {
+			if ((wasScaled || this.#scale.scaled) && offset > 0) this.#anchor = offset;
+		}
+	}
+	/** The measured heights by index in the current order. Forgets rows long gone. */
+	*#known(auto, count) {
+		const heights = this.#heights;
+		const prune = heights.size > 2 * count + 1e3;
+		for (const [id, px] of heights) {
+			const index = auto.indexOf(id);
+			if (index !== void 0 && index < count) yield [index, this.#fit(px)];
+			else if (prune) heights.delete(id);
+		}
+	}
+	/** The px grid rows are on for a body `logical` px tall (see `COARSE_BODY`). */
+	#quantumFor(logical) {
+		return Math.min(logical, this.#config.cap(logical)) > COARSE_BODY ? 2 : 1;
+	}
+	/** A measured height as a row renders it: on the grid, at least the row height. */
+	#fit(px) {
+		const q = this.#quantum;
+		const up = (value) => Math.ceil(value / q - .01) * q;
+		return Math.max(up(px), up(this.#config.rowHeight));
+	}
 	hostUpdated() {
+		this.#listen();
 		const anchor = this.#anchor;
 		if (anchor === void 0) return;
 		this.#anchor = void 0;
 		if (this.#element) this.#write(this.#element, anchor);
 		this.#host.requestUpdate();
 	}
+	hostDisconnected() {
+		this.#unlisten();
+	}
+	/**
+	* Auto mode: the virtualizer has no rows, so it reports neither scrolling nor
+	* a new viewport size. Listen to the scroller here.
+	*/
+	#listen() {
+		const element = this.#config.auto ? this.#getScrollElement() : null;
+		if (element === (this.#listening ?? null)) return;
+		this.#unlisten();
+		if (!element) return;
+		this.#scroller();
+		this.#listening = element;
+		element.addEventListener("scroll", this.#onScroll, { passive: true });
+		this.#resizeObserver ??= new ResizeObserver(this.#onScroll);
+		this.#resizeObserver.observe(element);
+	}
+	#unlisten() {
+		this.#listening?.removeEventListener("scroll", this.#onScroll);
+		this.#resizeObserver?.disconnect();
+		this.#listening = void 0;
+		this.#dropHold();
+	}
+	#dropHold() {
+		clearTimeout(this.#holdTimer);
+		this.#holdTimer = void 0;
+		this.#hold = 0;
+	}
+	/** Writes the held correction: the rows stay where they are on screen. */
+	#flushHold = () => {
+		this.#holdTimer = void 0;
+		const element = this.#element;
+		if (!element || this.#hold === 0) return;
+		const logical = this.#top(element);
+		this.#hold = 0;
+		element.scrollTo({ top: logical });
+		this.#host.requestUpdate();
+	};
+	/** Re-renders when the visible rows have changed. */
+	#onScroll = () => {
+		if (this.#holdTimer !== void 0) {
+			clearTimeout(this.#holdTimer);
+			this.#holdTimer = setTimeout(this.#flushHold, HOLD_MS);
+		}
+		const visible = this.#visible();
+		const rendered = this.#rendered;
+		if (visible?.start !== rendered?.start || visible?.end !== rendered?.end) this.#host.requestUpdate();
+	};
+	/** Auto mode: the visible rows (without overscan) and the logical offset, or `undefined` before layout. */
+	#visible() {
+		const element = this.#element;
+		const sizes = this.#sizes;
+		const view = element?.clientHeight ?? 0;
+		if (!element || sizes.count === 0 || view <= 0) return void 0;
+		const top = this.#top(element);
+		const start = sizes.indexAt(top);
+		return {
+			start,
+			end: Math.max(start, sizes.indexAt(top + view - .5)),
+			top
+		};
+	}
 	/**
 	* Computes the rendered window and updates the pool. Call once per render.
 	*/
 	computeWindow() {
+		if (this.#config.auto) return this.#autoWindow();
 		const v = this.#virtual.getVirtualizer();
 		const items = v.getVirtualItems();
 		const scaled = this.#scale.scaled;
@@ -173,6 +343,119 @@ var VirtualController = class {
 			} : null
 		};
 	}
+	/** `computeWindow()` for rows of different heights. */
+	#autoWindow() {
+		const { count, overscan, rowHeight, keep, rowIdAt } = this.#config;
+		const sizes = this.#sizes;
+		const scale = this.#scale;
+		const element = this.#element;
+		const visible = this.#visible();
+		this.#rendered = visible;
+		const shift = visible && element ? visible.top - element.scrollTop : 0;
+		const byId = /* @__PURE__ */ new Map();
+		if (visible && element) {
+			const indexes = steadyWindow({
+				startIndex: visible.start,
+				endIndex: visible.end,
+				overscan,
+				count
+			}, maxVisibleRows(element.clientHeight, rowHeight));
+			const first = indexes[0];
+			let start = first === void 0 ? 0 : sizes.startOf(first);
+			for (const index of indexes) {
+				const size = sizes.sizeOf(index);
+				byId.set(rowIdAt(index), {
+					index,
+					start: start - shift,
+					size
+				});
+				start += size;
+			}
+		}
+		this.#pool.pin(keep?.id);
+		if (keep && !byId.has(keep.id) && keep.index < count) {
+			const size = sizes.sizeOf(keep.index);
+			const start = sizes.startOf(keep.index) - shift;
+			byId.set(keep.id, {
+				index: keep.index,
+				start: scale.scaled ? Math.min(Math.max(start, -size), scale.size) : start,
+				size
+			});
+		}
+		const rows = [];
+		for (const { id, slot } of this.#pool.update(byId.keys())) {
+			const item = byId.get(id);
+			if (item) rows.push({
+				slot,
+				...item
+			});
+		}
+		return {
+			rows,
+			totalSize: scale.scaled ? scale.size : sizes.total,
+			range: visible ? {
+				start: visible.start,
+				end: visible.end
+			} : null
+		};
+	}
+	/**
+	* Auto mode: records the heights of rendered body rows (`[index, px]`), read
+	* once their content has rendered. Heights under the row height count as it.
+	* Returns whether any changed; the controller then requests the update that
+	* places the rows. Rows above the top row keep the rows in view in place.
+	*/
+	measureRows(measured) {
+		const { auto, rowIdAt, cap } = this.#config;
+		if (!auto) return false;
+		const sizes = this.#sizes;
+		const element = this.#element;
+		const top = element ? this.#top(element) : 0;
+		const anchor = sizes.indexAt(top);
+		const within = top - sizes.startOf(anchor);
+		let changed = false;
+		for (const [index, px] of measured) {
+			if (index < 0 || index >= sizes.count || !(px > 0)) continue;
+			this.#heights.set(rowIdAt(index), px);
+			if (sizes.set(index, this.#fit(px)) !== 0) changed = true;
+		}
+		if (!changed) return false;
+		const target = sizes.startOf(anchor) + within;
+		const scale = this.#scale;
+		const wasScaled = scale.excess > 0;
+		const logical = sizes.total;
+		if (scale.configure(logical, cap(logical)) && element) {
+			if (wasScaled && scale.scaled) scale.pivot(element.scrollTop, target, element.scrollHeight - element.clientHeight);
+			else if (wasScaled !== scale.scaled) this.#anchor = target;
+			else if (Math.abs(target - top) > .01) {
+				this.#hold += target - top;
+				clearTimeout(this.#holdTimer);
+				this.#holdTimer = setTimeout(this.#flushHold, HOLD_MS);
+			}
+		}
+		this.#host.requestUpdate();
+		return true;
+	}
+	/** The height of the row at `index` (auto mode: measured, or the row height). */
+	sizeOf(index) {
+		return this.#config.auto ? this.#sizes.sizeOf(index) : this.#config.rowHeight;
+	}
+	/** The logical offset of the row at `index` in the body. */
+	startOf(index) {
+		return this.#config.auto ? this.#sizes.startOf(index) : index * this.#config.rowHeight;
+	}
+	/**
+	* Auto mode: how many rows a page moves from row `from`, the rows that fit in
+	* `view` px below it (`down`) or above it. At least one.
+	*/
+	pageRows(from, down, view) {
+		const sizes = this.#sizes;
+		const start = sizes.startOf(from);
+		if (down) return Math.max(1, sizes.indexAt(start + view + .01) - from);
+		let to = sizes.indexAt(start - view);
+		if (sizes.startOf(to) < start - view - .01) to += 1;
+		return Math.max(1, from - to);
+	}
 	/** Number of pool slots created so far: bounded by the most rows rendered at once. */
 	get poolSize() {
 		return this.#pool.size;
@@ -181,8 +464,25 @@ var VirtualController = class {
 	get scaled() {
 		return this.#scale.scaled;
 	}
+	/** The index of the row at the top of the body (0 before the first layout). */
+	get topRow() {
+		const element = this.#element;
+		const { count, rowHeight } = this.#config;
+		if (!element || count === 0 || rowHeight <= 0) return 0;
+		if (this.#config.auto) return this.#sizes.indexAt(this.#top(element) + .5);
+		const row = Math.floor((this.#top(element) + .5) / rowHeight);
+		return Math.min(Math.max(row, 0), count - 1);
+	}
 	/** `'start'` puts the row at the top; `'auto'` scrolls only as far as needed to show it. */
 	scrollToIndex(index, align = "start") {
+		if (this.#config.auto) {
+			const element = this.#element;
+			if (!element) return;
+			if (align === "auto") this.reveal(index, 0, 0);
+			else this.#write(element, this.#sizes.startOf(Math.min(Math.max(index, 0), this.#sizes.count)));
+			this.#host.requestUpdate();
+			return;
+		}
 		this.#virtual.getVirtualizer().scrollToIndex(index, { align });
 	}
 	/** Scrolls by `delta` px of rows (logical px). */
@@ -190,6 +490,11 @@ var VirtualController = class {
 		const element = this.#element;
 		if (element) this.#write(element, this.#top(element) + delta);
 	}
+	/** Scrolls to the start or the end of the body. */
+	scrollToEdge(edge) {
+		const element = this.#element;
+		if (element) this.#write(element, edge === "start" ? 0 : Number.MAX_SAFE_INTEGER);
+	}
 	/**
 	* Scrolls the least distance that shows row `index` in full, between the
 	* content above the body (`before` px: the header and top pinned rows) and
@@ -200,21 +505,22 @@ var VirtualController = class {
 	reveal(index, before, after) {
 		const element = this.#element;
 		if (!element) return false;
-		const { rowHeight } = this.#config;
+		const auto = this.#config.auto !== void 0;
 		const offset = this.#top(element);
 		const view = element.clientHeight - before - after;
-		const start = index * rowHeight;
+		const start = this.startOf(index);
+		const size = this.sizeOf(index);
 		let target;
 		let round;
-		if (start < offset) {
+		if (start < offset || auto && size > view) {
 			target = start;
 			round = Math.floor;
-		} else if (start + rowHeight > offset + view) {
-			target = start + rowHeight - view;
+		} else if (start + size > offset + view) {
+			target = start + size - view;
 			round = Math.ceil;
 		} else target = offset;
 		if (target !== offset) this.#write(element, target, void 0, round);
-		return this.#virtual.getVirtualizer().scrollOffset !== this.#top(element);
+		return (auto ? this.#rendered?.top : this.#virtual.getVirtualizer().scrollOffset) !== this.#top(element);
 	}
 };
 export { VirtualController };