argus-table 0.2.2 → 0.4.0

package/dist/controllers/reorder-drag.js.map

@@ -1 +1 @@
-{"version":3,"file":"reorder-drag.js","names":[],"sources":["../../src/controllers/reorder-drag.ts"],"sourcesContent":["/** Where a dragged column would land: its new position and the header that shows the drop line. */\nexport interface DropTarget {\n  /** Position in the whole column order after the move, 0-based. */\n  to: number;\n  /** The header that draws the drop line. */\n  columnId: string;\n  /** The edge of that header the line is on, in logical terms. */\n  edge: 'start' | 'end';\n}\n\n/** A header of the dragged column's group, in visual order. */\nexport interface DropSlot {\n  id: string;\n  /** Its position in the whole column order, 0-based. */\n  index: number;\n  rect: { left: number; right: number };\n}\n\n/**\n * The drop target for a pointer at `x`: the gap between headers nearest to it,\n * decided by each header's midpoint. `undefined` where the column would stay\n * put. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left.\n */\nexport function dropTarget(\n  slots: readonly DropSlot[],\n  draggedId: string,\n  x: number,\n  direction: 1 | -1,\n): DropTarget | undefined {\n  const from = slots.findIndex((s) => s.id === draggedId);\n  const first = slots[0];\n  const last = slots.at(-1);\n  if (from < 0 || !first || !last) return undefined;\n  // The gap before the first header whose middle is past the pointer, in reading order.\n  let gap = slots.findIndex((s) => (x - (s.rect.left + s.rect.right) / 2) * direction < 0);\n  if (gap < 0) gap = slots.length;\n  if (gap === from || gap === from + 1) return undefined;\n  const to = first.index + (gap > from ? gap - 1 : gap);\n  const at = slots[gap];\n  return at ? { to, columnId: at.id, edge: 'start' } : { to, columnId: last.id, edge: 'end' };\n}\n\nexport interface ReorderDragOptions {\n  /** The scroll container: it scrolls while the pointer is near its edges. */\n  scroller: HTMLElement;\n  /** The drop target for a pointer at `x` (client coordinates). */\n  targetAt: (x: number) => DropTarget | undefined;\n  /**\n   * Where the dragged column's group is visible, in client x, if it can scroll\n   * (the scrolling columns). Near these edges the scroller scrolls with the drag.\n   */\n  scrollArea: () => { left: number; right: number } | undefined;\n  onStart: () => void;\n  /** The target changed (`undefined`: the column would stay put). */\n  onTarget: (target: DropTarget | undefined) => void;\n  /** The pointer was released over a target, or `undefined` when it would stay put. */\n  onDrop: (target: DropTarget | undefined) => void;\n  /** Escape, a cancelled pointer, or a release without a drag. */\n  onCancel: () => void;\n}\n\n/** Movement before a press becomes a drag, so a click still sorts. */\nconst THRESHOLD = 4;\n/** Width of the band at the scroll area's edges that scrolls, and the top speed there. */\nconst EDGE = 40;\nconst MAX_SPEED = 16;\n\nconst INTERACTIVE = 'button,input,select,textarea,a[href],label,[contenteditable]';\n\n/**\n * Whether a press on a header may start a reorder drag: the primary button of a\n * mouse or pen (a touch pans the table instead), not on a resize handle, and not\n * in interactive content slotted into the header.\n */\nexport function canStartReorder(down: PointerEvent, cell: HTMLElement): boolean {\n  if (down.button !== 0 || down.pointerType === 'touch') return false;\n  for (const target of down.composedPath()) {\n    if (target === cell) return true;\n    if (!(target instanceof Element)) continue;\n    if (target instanceof HTMLElement && target.dataset.resizeCol !== undefined) return false;\n    if (target.matches(INTERACTIVE)) return false;\n  }\n  return false;\n}\n\n/**\n * One pointer drag of a column header. It becomes a drag after a few pixels of\n * movement; until then the press is a click. While dragging, the pointer is\n * captured by the header, the target follows the pointer once per frame, and the\n * scroll area scrolls near its edges. Escape cancels. The click that ends a drag\n * is swallowed, so it neither sorts nor counts as a cell click.\n */\nexport function startReorderDrag(\n  cell: HTMLElement,\n  down: PointerEvent,\n  options: ReorderDragOptions,\n): void {\n  const view = cell.ownerDocument.defaultView ?? window;\n  const startX = down.clientX;\n  const startY = down.clientY;\n  let x = startX;\n  let dragging = false;\n  let frame = 0;\n  let target: DropTarget | undefined;\n\n  const same = (a: DropTarget | undefined, b: DropTarget | undefined) =>\n    a?.to === b?.to && a?.columnId === b?.columnId && a?.edge === b?.edge;\n\n  const tick = () => {\n    frame = 0;\n    if (!dragging) return;\n    const area = options.scrollArea();\n    if (area) {\n      const speed =\n        x < area.left + EDGE\n          ? -Math.min(1, (area.left + EDGE - x) / EDGE)\n          : x > area.right - EDGE\n            ? Math.min(1, (x - (area.right - EDGE)) / EDGE)\n            : 0;\n      // A visual delta: scrollLeft runs the same way in LTR and RTL.\n      if (speed !== 0) options.scroller.scrollLeft += Math.round(speed * MAX_SPEED);\n      // Targets past the visible part would be hidden under pinned columns.\n      x = Math.min(Math.max(x, area.left), area.right);\n    }\n    const next = options.targetAt(x);\n    if (!same(next, target)) {\n      target = next;\n      options.onTarget(target);\n    }\n    // Keep running while dragging: the view may still be scrolling.\n    frame = view.requestAnimationFrame(tick);\n  };\n\n  const listeners = new AbortController();\n  const cleanup = (event?: PointerEvent) => {\n    if (frame) view.cancelAnimationFrame(frame);\n    frame = 0;\n    listeners.abort();\n    if (event && cell.hasPointerCapture(event.pointerId)) {\n      cell.releasePointerCapture(event.pointerId);\n    }\n  };\n\n  const move = (event: PointerEvent) => {\n    if (event.pointerId !== down.pointerId) return;\n    x = event.clientX;\n    if (!dragging) {\n      if (Math.hypot(x - startX, event.clientY - startY) < THRESHOLD) return;\n      dragging = true;\n      try {\n        cell.setPointerCapture(event.pointerId);\n      } catch {\n        // Synthetic pointers can't be captured; the window listeners still see the moves.\n      }\n      options.onStart();\n    }\n    // No text selection while dragging.\n    event.preventDefault();\n    frame ||= view.requestAnimationFrame(tick);\n  };\n\n  const up = (event: PointerEvent) => {\n    if (event.pointerId !== down.pointerId) return;\n    cleanup(event);\n    if (!dragging) return;\n    x = event.clientX;\n    const area = options.scrollArea();\n    if (area) x = Math.min(Math.max(x, area.left), area.right);\n    swallowClick(view);\n    options.onDrop(options.targetAt(x));\n  };\n\n  const cancel = (event: PointerEvent) => {\n    if (event.pointerId !== down.pointerId) return;\n    cleanup(event);\n    if (dragging) options.onCancel();\n  };\n\n  const key = (event: KeyboardEvent) => {\n    if (!dragging || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    cleanup();\n    // The pointer is still down: its release must not count as a click.\n    swallowClick(view, false);\n    options.onCancel();\n  };\n\n  const listen = { capture: true, signal: listeners.signal };\n  view.addEventListener('pointermove', move, listen);\n  view.addEventListener('pointerup', up, listen);\n  view.addEventListener('pointercancel', cancel, listen);\n  view.addEventListener('keydown', key, listen);\n}\n\n/**\n * Stops the click that follows the release of a drag, if one comes. It comes in\n * the same task as the release, so the guard goes once that task is over. After\n * Escape the pointer is still down (`released: false`): the guard waits for its release.\n */\nfunction swallowClick(view: Window, released = true): void {\n  const stop = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n  const remove = () => {\n    setTimeout(() => {\n      view.removeEventListener('click', stop, { capture: true });\n    });\n  };\n  view.addEventListener('click', stop, { capture: true, once: true });\n  if (released) remove();\n  else view.addEventListener('pointerup', remove, { capture: true, once: true });\n}\n"],"mappings":"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"}
+{"version":3,"file":"reorder-drag.js","names":[],"sources":["../../src/controllers/reorder-drag.ts"],"sourcesContent":["import { INTERACTIVE } from '../interactive.js';\n\n/** Where a dragged column or group would land: its new position and the header that shows the drop line. */\nexport interface DropTarget {\n  /** Position among its siblings after the move, 0-based. */\n  to: number;\n  /** The slot (a column or group header) that draws the drop line. */\n  id: string;\n  /** The edge of that header the line is on, in logical terms. */\n  edge: 'start' | 'end';\n}\n\n/** A header of what the dragged column or group moves among, in visual order. */\nexport interface DropSlot {\n  id: string;\n  /** Its position among them, 0-based. */\n  index: number;\n  rect: { left: number; right: number };\n}\n\n/**\n * The drop target for a pointer at `x`: the gap between headers nearest to it,\n * decided by each header's midpoint. `undefined` where the column would stay\n * put. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left.\n * The slots needn't be next to each other in the order: with\n * `virtualizeColumns`, headers out of view aren't rendered.\n */\nexport function dropTarget(\n  slots: readonly DropSlot[],\n  draggedId: string,\n  x: number,\n  direction: 1 | -1,\n): DropTarget | undefined {\n  const dragged = slots.find((s) => s.id === draggedId);\n  const last = slots.at(-1);\n  if (!dragged || !last) return undefined;\n  // The gap before the first header whose middle is past the pointer, in reading order.\n  const at = slots.find((s) => (x - (s.rect.left + s.rect.right) / 2) * direction < 0);\n  if (!at) {\n    // Past the last header: after it.\n    const to = last.index >= dragged.index ? last.index : last.index + 1;\n    return to === dragged.index ? undefined : { to, id: last.id, edge: 'end' };\n  }\n  // Taking the column out shifts the ones after it one place back.\n  const to = at.index > dragged.index ? at.index - 1 : at.index;\n  return to === dragged.index ? undefined : { to, id: at.id, edge: 'start' };\n}\n\nexport interface ReorderDragOptions {\n  /** The scroll container: it scrolls while the pointer is near its edges. */\n  scroller: HTMLElement;\n  /** The drop target for a pointer at `x` (client coordinates). */\n  targetAt: (x: number) => DropTarget | undefined;\n  /**\n   * Where the dragged column's group is visible, in client x, if it can scroll\n   * (the scrolling columns). Near these edges the scroller scrolls with the drag.\n   */\n  scrollArea: () => { left: number; right: number } | undefined;\n  onStart: () => void;\n  /** The target changed (`undefined`: the column would stay put). */\n  onTarget: (target: DropTarget | undefined) => void;\n  /** The pointer was released over a target, or `undefined` when it would stay put. */\n  onDrop: (target: DropTarget | undefined) => void;\n  /** Escape, a cancelled pointer, or a release without a drag. */\n  onCancel: () => void;\n}\n\n/** Movement before a press becomes a drag, so a click still sorts. */\nconst THRESHOLD = 4;\n/** Width of the band at the scroll area's edges that scrolls, and the top speed there. */\nconst EDGE = 40;\nconst MAX_SPEED = 16;\n\n/**\n * Whether a press on a header may start a reorder drag: the primary button of a\n * mouse or pen (a touch pans the table instead), not on a resize handle, and not\n * in interactive content slotted into the header.\n */\nexport function canStartReorder(down: PointerEvent, cell: HTMLElement): boolean {\n  if (down.button !== 0 || down.pointerType === 'touch') return false;\n  for (const target of down.composedPath()) {\n    if (target === cell) return true;\n    if (!(target instanceof Element)) continue;\n    if (target instanceof HTMLElement && target.dataset.resizeCol !== undefined) return false;\n    if (target.matches(INTERACTIVE)) return false;\n  }\n  return false;\n}\n\n/**\n * One pointer drag of a column header. It becomes a drag after a few pixels of\n * movement; until then the press is a click. While dragging, the pointer is\n * captured by the header, the target follows the pointer once per frame, and the\n * scroll area scrolls near its edges. Escape cancels. The click that ends a drag\n * is swallowed, so it neither sorts nor counts as a cell click.\n */\nexport function startReorderDrag(\n  cell: HTMLElement,\n  down: PointerEvent,\n  options: ReorderDragOptions,\n): void {\n  const view = cell.ownerDocument.defaultView ?? window;\n  const startX = down.clientX;\n  const startY = down.clientY;\n  let x = startX;\n  let dragging = false;\n  let frame = 0;\n  let target: DropTarget | undefined;\n\n  const same = (a: DropTarget | undefined, b: DropTarget | undefined) =>\n    a?.to === b?.to && a?.id === b?.id && a?.edge === b?.edge;\n\n  const tick = () => {\n    frame = 0;\n    if (!dragging) return;\n    const area = options.scrollArea();\n    if (area) {\n      const speed =\n        x < area.left + EDGE\n          ? -Math.min(1, (area.left + EDGE - x) / EDGE)\n          : x > area.right - EDGE\n            ? Math.min(1, (x - (area.right - EDGE)) / EDGE)\n            : 0;\n      // A visual delta: scrollLeft runs the same way in LTR and RTL.\n      if (speed !== 0) options.scroller.scrollLeft += Math.round(speed * MAX_SPEED);\n      // Targets past the visible part would be hidden under pinned columns.\n      x = Math.min(Math.max(x, area.left), area.right);\n    }\n    const next = options.targetAt(x);\n    if (!same(next, target)) {\n      target = next;\n      options.onTarget(target);\n    }\n    // Keep running while dragging: the view may still be scrolling.\n    frame = view.requestAnimationFrame(tick);\n  };\n\n  const listeners = new AbortController();\n  const cleanup = (event?: PointerEvent) => {\n    if (frame) view.cancelAnimationFrame(frame);\n    frame = 0;\n    listeners.abort();\n    if (event && cell.hasPointerCapture(event.pointerId)) {\n      cell.releasePointerCapture(event.pointerId);\n    }\n  };\n\n  const move = (event: PointerEvent) => {\n    if (event.pointerId !== down.pointerId) return;\n    x = event.clientX;\n    if (!dragging) {\n      if (Math.hypot(x - startX, event.clientY - startY) < THRESHOLD) return;\n      dragging = true;\n      try {\n        cell.setPointerCapture(event.pointerId);\n      } catch {\n        // Synthetic pointers can't be captured; the window listeners still see the moves.\n      }\n      options.onStart();\n    }\n    // No text selection while dragging.\n    event.preventDefault();\n    frame ||= view.requestAnimationFrame(tick);\n  };\n\n  const up = (event: PointerEvent) => {\n    if (event.pointerId !== down.pointerId) return;\n    cleanup(event);\n    if (!dragging) return;\n    x = event.clientX;\n    const area = options.scrollArea();\n    if (area) x = Math.min(Math.max(x, area.left), area.right);\n    swallowClick(view);\n    options.onDrop(options.targetAt(x));\n  };\n\n  const cancel = (event: PointerEvent) => {\n    if (event.pointerId !== down.pointerId) return;\n    cleanup(event);\n    if (dragging) options.onCancel();\n  };\n\n  const key = (event: KeyboardEvent) => {\n    if (!dragging || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    cleanup();\n    // The pointer is still down: its release must not count as a click.\n    swallowClick(view, false);\n    options.onCancel();\n  };\n\n  const listen = { capture: true, signal: listeners.signal };\n  view.addEventListener('pointermove', move, listen);\n  view.addEventListener('pointerup', up, listen);\n  view.addEventListener('pointercancel', cancel, listen);\n  view.addEventListener('keydown', key, listen);\n}\n\n/**\n * Stops the click that follows the release of a drag, if one comes. It comes in\n * the same task as the release, so the guard goes once that task is over. After\n * Escape the pointer is still down (`released: false`): the guard waits for its release.\n */\nfunction swallowClick(view: Window, released = true): void {\n  const stop = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n  const remove = () => {\n    setTimeout(() => {\n      view.removeEventListener('click', stop, { capture: true });\n    });\n  };\n  view.addEventListener('click', stop, { capture: true, once: true });\n  if (released) remove();\n  else view.addEventListener('pointerup', remove, { capture: true, once: true });\n}\n"],"mappings":"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"}

package/dist/controllers/row-measure.js

@@ -0,0 +1,122 @@
+// 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 each update reads every rendered row that shows another row than
+* at its last read (all of them after `invalidate()`): 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 each update reads every rendered row that shows another row than\n * at its last read (all of them after `invalidate()`): 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,30 +153,159 @@ 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
 			});
 			if (next.rowHeight !== prev.rowHeight) this.#virtual.getVirtualizer().measure();
 		}
+		this.#rescale(next.count * next.rowHeight, this.#virtual.getVirtualizer().scrollOffset);
+	}
+	/**
+	* A new logical body height. A new mapping would move the rows under a scaled
+	* scroll position (a data source growing, a zoom change): keep the logical
+	* offset (read before the new mapping) once the body has its new height.
+	*/
+	#rescale(logical, offset) {
 		const wasScaled = this.#scale.excess > 0;
-		const offset = this.#virtual.getVirtualizer().scrollOffset;
-		if (this.#scale.configure(next.count * next.rowHeight, next.cap)) {
-			if ((wasScaled || this.#scale.scaled) && offset !== null && offset > 0) this.#anchor = offset;
+		if (!this.#scale.configure(logical, this.#config.cap(logical))) return;
+		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;
+		this.#rescale(sizes.total, element ? this.#top(element) : 0);
+	}
+	/** 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;
@@ -155,6 +325,19 @@ var VirtualController = class {
 				start: scaled ? Math.min(Math.max(start, -rowHeight), size) : start
 			});
 		}
+		const rows = this.#pooled(byId);
+		const range = v.range;
+		return {
+			rows,
+			totalSize: scaled ? size : v.getTotalSize(),
+			range: range ? {
+				start: range.startIndex,
+				end: range.endIndex
+			} : null
+		};
+	}
+	/** The rows to render, in pool order: each holds its pool slot while in range. */
+	#pooled(byId) {
 		const rows = [];
 		for (const { id, slot } of this.#pool.update(byId.keys())) {
 			const item = byId.get(id);
@@ -163,26 +346,136 @@ var VirtualController = class {
 				...item
 			});
 		}
-		const range = v.range;
+		return rows;
+	}
+	/** `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
+			});
+		}
 		return {
-			rows,
-			totalSize: scaled ? size : v.getTotalSize(),
-			range: range ? {
-				start: range.startIndex,
-				end: range.endIndex
+			rows: this.#pooled(byId),
+			totalSize: scale.scaled ? scale.size : sizes.total,
+			range: visible ? {
+				start: visible.start,
+				end: visible.end
 			} : null
 		};
 	}
-	/** Number of pool slots created so far: bounded by the most rows rendered at once. */
-	get poolSize() {
-		return this.#pool.size;
+	/**
+	* 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);
 	}
 	/** Whether the body is taller than the cap and scrolls scaled. */
 	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). */
@@ -205,21 +498,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 };