argus-table 0.2.2 → 0.3.0

package/dist/controllers/auto-width.js

@@ -49,6 +49,17 @@ var AutoWidths = class {
 		if (kept.length !== Object.keys(this.widths).length) this.widths = Object.fromEntries(kept);
 	}
 	/**
+	* The auto columns still to be measured: never, or without loaded rows yet.
+	* With `virtualizeColumns` they render out of view until they are.
+	*/
+	pending(columns) {
+		return columns.filter((c) => {
+			if (!c.auto) return false;
+			const state = this.#state.get(c.id);
+			return state === void 0 || state === "provisional";
+		}).map((c) => c.id);
+	}
+	/**
 	* Measures the auto columns that need it. Returns `true` if a width changed;
 	* the caller then renders again (the one extra pass of the render cycle).
 	*/

package/dist/controllers/auto-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-width.js","names":[],"sources":["../../src/controllers/auto-width.ts"],"sourcesContent":["import type { ColumnSizingState } from '@argus-table/core';\n\n/**\n * The width each column's content needs, in px, from the cells rendered now:\n * the header, the pinned rows and the rendered body rows. Rows that haven't\n * loaded are skipped (their skeleton bars say nothing about the content).\n *\n * Every cell of the columns gets `data-measure`, which sizes it to its\n * `max-content` (base styles), so the browser accounts for padding, the sort\n * indicator and whatever the content is. One forced layout, no paint: the\n * attribute is gone before the frame ends. A column with nothing laid out\n * (the table is hidden) is left out.\n */\nexport function measureColumns(root: ParentNode, ids: Iterable<string>): Map<string, number> {\n  const wanted = new Set(ids);\n  const widths = new Map<string, number>();\n  if (wanted.size === 0) return widths;\n  const cells = [...root.querySelectorAll<HTMLElement>('[data-col]')].filter(\n    (cell) =>\n      wanted.has(cell.dataset.col ?? '') && !cell.parentElement?.matches('[part~=\"row-loading\"]'),\n  );\n  for (const cell of cells) cell.setAttribute('data-measure', '');\n  for (const cell of cells) {\n    const id = cell.dataset.col ?? '';\n    const px = Math.ceil(cell.getBoundingClientRect().width);\n    if (px > 0 && px > (widths.get(id) ?? 0)) widths.set(id, px);\n  }\n  for (const cell of cells) cell.removeAttribute('data-measure');\n  return widths;\n}\n\n/**\n * - `provisional`: measured without loaded body rows (the header and pinned rows only).\n * - `final`: measured with loaded rows; kept until the column goes away.\n * - `fonts`: measured while web fonts were loading; measured again once they are ready.\n */\ntype State = 'provisional' | 'final' | 'fonts';\n\n/**\n * Widths of `width: 'auto'` columns. A column measures once its first loaded\n * rows render, and before that fits the header and pinned rows. So each column\n * is measured at most twice (three times if fonts were still loading), and a\n * table that stays empty doesn't measure on every update. State is keyed by\n * column id, so new `columns` arrays with the same ids don't measure again.\n */\nexport class AutoWidths {\n  /** Measured widths by column id; a new object whenever one changes. */\n  widths: ColumnSizingState = {};\n  readonly #state = new Map<string, State>();\n  #fontsPending = false;\n  readonly #requestUpdate: () => void;\n\n  constructor(requestUpdate: () => void) {\n    this.#requestUpdate = requestUpdate;\n  }\n\n  /** Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns. */\n  sync(ids: Iterable<string>): void {\n    const auto = new Set(ids);\n    for (const id of this.#state.keys()) {\n      if (!auto.has(id)) this.#state.delete(id);\n    }\n    const kept = Object.entries(this.widths).filter(([id]) => auto.has(id));\n    if (kept.length !== Object.keys(this.widths).length) this.widths = Object.fromEntries(kept);\n  }\n\n  /**\n   * Measures the auto columns that need it. Returns `true` if a width changed;\n   * the caller then renders again (the one extra pass of the render cycle).\n   */\n  measure(\n    root: ParentNode,\n    columns: readonly { id: string; auto: boolean }[],\n    hasLoadedRows: boolean,\n  ): boolean {\n    const due = columns\n      .filter((c) => c.auto)\n      .map((c) => c.id)\n      .filter((id) => {\n        const state = this.#state.get(id);\n        return state === undefined || (state === 'provisional' && hasLoadedRows);\n      });\n    if (due.length === 0) return false;\n    const measured = measureColumns(root, due);\n    const fontsLoading = typeof document !== 'undefined' && document.fonts.status === 'loading';\n    let next: ColumnSizingState | undefined;\n    for (const [id, px] of measured) {\n      this.#state.set(id, fontsLoading ? 'fonts' : hasLoadedRows ? 'final' : 'provisional');\n      if (this.widths[id] !== px) (next ??= { ...this.widths })[id] = px;\n    }\n    if (fontsLoading && measured.size > 0) this.#remeasureAfterFonts();\n    if (next) this.widths = next;\n    return next !== undefined;\n  }\n\n  /** Once web fonts are ready, columns measured meanwhile measure again. */\n  #remeasureAfterFonts(): void {\n    if (this.#fontsPending) return;\n    this.#fontsPending = true;\n    void document.fonts.ready.then(() => {\n      this.#fontsPending = false;\n      let any = false;\n      for (const [id, state] of this.#state) {\n        if (state === 'fonts') {\n          this.#state.delete(id);\n          any = true;\n        }\n      }\n      if (any) this.#requestUpdate();\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,eAAe,MAAkB,KAA4C;CAC3F,MAAM,SAAS,IAAI,IAAI,GAAG;CAC1B,MAAM,yBAAS,IAAI,IAAoB;CACvC,IAAI,OAAO,SAAS,GAAG,OAAO;CAC9B,MAAM,QAAQ,CAAC,GAAG,KAAK,iBAA8B,YAAY,CAAC,CAAC,CAAC,QACjE,SACC,OAAO,IAAI,KAAK,QAAQ,OAAO,EAAE,KAAK,CAAC,KAAK,eAAe,QAAQ,yBAAuB,CAC9F;CACA,KAAK,MAAM,QAAQ,OAAO,KAAK,aAAa,gBAAgB,EAAE;CAC9D,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,KAAK,KAAK,QAAQ,OAAO;EAC/B,MAAM,KAAK,KAAK,KAAK,KAAK,sBAAsB,CAAC,CAAC,KAAK;EACvD,IAAI,KAAK,KAAK,MAAM,OAAO,IAAI,EAAE,KAAK,IAAI,OAAO,IAAI,IAAI,EAAE;CAC7D;CACA,KAAK,MAAM,QAAQ,OAAO,KAAK,gBAAgB,cAAc;CAC7D,OAAO;AACT;;;;;;;;AAgBA,IAAa,aAAb,MAAwB;CAGtB;CACA;CACA;CAEA,YAAY,eAA2B;EALX,KAAA,SAAA,CAAC;EACX,KAAA,yBAAA,IAAI,IAAmB;EACzB,KAAA,gBAAA;EAId,KAAK,iBAAiB;CACxB;;CAGA,KAAK,KAA6B;EAChC,MAAM,OAAO,IAAI,IAAI,GAAG;EACxB,KAAK,MAAM,MAAM,KAAK,OAAO,KAAK,GAChC,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,KAAK,OAAO,OAAO,EAAE;EAE1C,MAAM,OAAO,OAAO,QAAQ,KAAK,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;EACtE,IAAI,KAAK,WAAW,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,QAAQ,KAAK,SAAS,OAAO,YAAY,IAAI;CAC5F;;;;;CAMA,QACE,MACA,SACA,eACS;EACT,MAAM,MAAM,QACT,QAAQ,MAAM,EAAE,IAAI,CAAC,CACrB,KAAK,MAAM,EAAE,EAAE,CAAC,CAChB,QAAQ,OAAO;GACd,MAAM,QAAQ,KAAK,OAAO,IAAI,EAAE;GAChC,OAAO,UAAU,KAAA,KAAc,UAAU,iBAAiB;EAC5D,CAAC;EACH,IAAI,IAAI,WAAW,GAAG,OAAO;EAC7B,MAAM,WAAW,eAAe,MAAM,GAAG;EACzC,MAAM,eAAe,OAAO,aAAa,eAAe,SAAS,MAAM,WAAW;EAClF,IAAI;EACJ,KAAK,MAAM,CAAC,IAAI,OAAO,UAAU;GAC/B,KAAK,OAAO,IAAI,IAAI,eAAe,UAAU,gBAAgB,UAAU,aAAa;GACpF,IAAI,KAAK,OAAO,QAAQ,IAAI,CAAC,SAAS,EAAE,GAAG,KAAK,OAAO,EAAA,CAAG,MAAM;EAClE;EACA,IAAI,gBAAgB,SAAS,OAAO,GAAG,KAAK,qBAAqB;EACjE,IAAI,MAAM,KAAK,SAAS;EACxB,OAAO,SAAS,KAAA;CAClB;;CAGA,uBAA6B;EAC3B,IAAI,KAAK,eAAe;EACxB,KAAK,gBAAgB;EACrB,SAAc,MAAM,MAAM,WAAW;GACnC,KAAK,gBAAgB;GACrB,IAAI,MAAM;GACV,KAAK,MAAM,CAAC,IAAI,UAAU,KAAK,QAC7B,IAAI,UAAU,SAAS;IACrB,KAAK,OAAO,OAAO,EAAE;IACrB,MAAM;GACR;GAEF,IAAI,KAAK,KAAK,eAAe;EAC/B,CAAC;CACH;AACF"}
+{"version":3,"file":"auto-width.js","names":[],"sources":["../../src/controllers/auto-width.ts"],"sourcesContent":["import type { ColumnSizingState } from '@argus-table/core';\n\n/**\n * The width each column's content needs, in px, from the cells rendered now:\n * the header, the pinned rows and the rendered body rows. Rows that haven't\n * loaded are skipped (their skeleton bars say nothing about the content).\n *\n * Every cell of the columns gets `data-measure`, which sizes it to its\n * `max-content` (base styles), so the browser accounts for padding, the sort\n * indicator and whatever the content is. One forced layout, no paint: the\n * attribute is gone before the frame ends. A column with nothing laid out\n * (the table is hidden) is left out.\n */\nexport function measureColumns(root: ParentNode, ids: Iterable<string>): Map<string, number> {\n  const wanted = new Set(ids);\n  const widths = new Map<string, number>();\n  if (wanted.size === 0) return widths;\n  const cells = [...root.querySelectorAll<HTMLElement>('[data-col]')].filter(\n    (cell) =>\n      wanted.has(cell.dataset.col ?? '') && !cell.parentElement?.matches('[part~=\"row-loading\"]'),\n  );\n  for (const cell of cells) cell.setAttribute('data-measure', '');\n  for (const cell of cells) {\n    const id = cell.dataset.col ?? '';\n    const px = Math.ceil(cell.getBoundingClientRect().width);\n    if (px > 0 && px > (widths.get(id) ?? 0)) widths.set(id, px);\n  }\n  for (const cell of cells) cell.removeAttribute('data-measure');\n  return widths;\n}\n\n/**\n * - `provisional`: measured without loaded body rows (the header and pinned rows only).\n * - `final`: measured with loaded rows; kept until the column goes away.\n * - `fonts`: measured while web fonts were loading; measured again once they are ready.\n */\ntype State = 'provisional' | 'final' | 'fonts';\n\n/**\n * Widths of `width: 'auto'` columns. A column measures once its first loaded\n * rows render, and before that fits the header and pinned rows. So each column\n * is measured at most twice (three times if fonts were still loading), and a\n * table that stays empty doesn't measure on every update. State is keyed by\n * column id, so new `columns` arrays with the same ids don't measure again.\n */\nexport class AutoWidths {\n  /** Measured widths by column id; a new object whenever one changes. */\n  widths: ColumnSizingState = {};\n  readonly #state = new Map<string, State>();\n  #fontsPending = false;\n  readonly #requestUpdate: () => void;\n\n  constructor(requestUpdate: () => void) {\n    this.#requestUpdate = requestUpdate;\n  }\n\n  /** Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns. */\n  sync(ids: Iterable<string>): void {\n    const auto = new Set(ids);\n    for (const id of this.#state.keys()) {\n      if (!auto.has(id)) this.#state.delete(id);\n    }\n    const kept = Object.entries(this.widths).filter(([id]) => auto.has(id));\n    if (kept.length !== Object.keys(this.widths).length) this.widths = Object.fromEntries(kept);\n  }\n\n  /**\n   * The auto columns still to be measured: never, or without loaded rows yet.\n   * With `virtualizeColumns` they render out of view until they are.\n   */\n  pending(columns: readonly { id: string; auto: boolean }[]): string[] {\n    return columns\n      .filter((c) => {\n        if (!c.auto) return false;\n        const state = this.#state.get(c.id);\n        return state === undefined || state === 'provisional';\n      })\n      .map((c) => c.id);\n  }\n\n  /**\n   * Measures the auto columns that need it. Returns `true` if a width changed;\n   * the caller then renders again (the one extra pass of the render cycle).\n   */\n  measure(\n    root: ParentNode,\n    columns: readonly { id: string; auto: boolean }[],\n    hasLoadedRows: boolean,\n  ): boolean {\n    const due = columns\n      .filter((c) => c.auto)\n      .map((c) => c.id)\n      .filter((id) => {\n        const state = this.#state.get(id);\n        return state === undefined || (state === 'provisional' && hasLoadedRows);\n      });\n    if (due.length === 0) return false;\n    const measured = measureColumns(root, due);\n    const fontsLoading = typeof document !== 'undefined' && document.fonts.status === 'loading';\n    let next: ColumnSizingState | undefined;\n    for (const [id, px] of measured) {\n      this.#state.set(id, fontsLoading ? 'fonts' : hasLoadedRows ? 'final' : 'provisional');\n      if (this.widths[id] !== px) (next ??= { ...this.widths })[id] = px;\n    }\n    if (fontsLoading && measured.size > 0) this.#remeasureAfterFonts();\n    if (next) this.widths = next;\n    return next !== undefined;\n  }\n\n  /** Once web fonts are ready, columns measured meanwhile measure again. */\n  #remeasureAfterFonts(): void {\n    if (this.#fontsPending) return;\n    this.#fontsPending = true;\n    void document.fonts.ready.then(() => {\n      this.#fontsPending = false;\n      let any = false;\n      for (const [id, state] of this.#state) {\n        if (state === 'fonts') {\n          this.#state.delete(id);\n          any = true;\n        }\n      }\n      if (any) this.#requestUpdate();\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/controllers/column-window.js

@@ -0,0 +1,139 @@
+import { columnWindow, maxVisibleColumns } from "../core/src/virtual/column-window.js";
+import { RowPool } from "../core/src/virtual/row-pool.js";
+/**
+* Column virtualization (`virtualizeColumns`): which columns render, and which
+* pool slot's DOM each one uses.
+*
+* Off, every column renders in visual order, its slot is its `colIndex` and
+* its cells are keyed by column id: the DOM is what it always was.
+*
+* On, the scrolling columns in view render, plus `COLUMN_OVERSCAN` on each
+* side, and the pinned columns, the checkbox column and the columns the table
+* keeps (the active one, one being dragged, auto widths still to measure)
+* whatever the scroll position. They are pooled like rows (ADR 0001): a column
+* entering the view reuses the cells, slots and content of one that left, so
+* the DOM is updated in place, and the window has one size, so the pool fills
+* on the first render and scrolling only reuses it (in WebKit, new slots
+* while scrolling cut a wheel scroll short; see `steadyWindow`). DOM order is
+* then pool order: each cell is placed in its grid column explicitly, and
+* `aria-colindex` carries the position, as `aria-rowindex` does for rows.
+*/
+var ColumnWindowController = class {
+	#host;
+	#scroller;
+	#pool = new RowPool();
+	#attached;
+	#resize;
+	#enabled = false;
+	/** The columns of the last render, and what the window was computed from. */
+	#columns = [];
+	#scrolling = [];
+	#pinnedWidth = 0;
+	#maxVisible;
+	/** First index and size of the last window rendered. */
+	#key = "";
+	constructor(host, scroller) {
+		this.#host = host;
+		this.#scroller = scroller;
+		host.addController(this);
+	}
+	hostConnected() {
+		this.#attach();
+	}
+	hostUpdated() {
+		this.#attach();
+	}
+	hostDisconnected() {
+		this.#attached?.removeEventListener("scroll", this.#onScroll);
+		this.#resize?.disconnect();
+		this.#attached = void 0;
+	}
+	/** Number of column pool slots created so far. */
+	get poolSize() {
+		return this.#pool.size;
+	}
+	/**
+	* The columns to render, given the model's columns in visual order. With
+	* `enabled`, `keep` names columns to render wherever they are. Call once per
+	* render.
+	*/
+	compute(columns, enabled, keep) {
+		this.#enabled = enabled;
+		if (!enabled) {
+			this.#pool.clear();
+			this.#key = "";
+			return columns.map((c) => ({
+				...c,
+				slot: c.colIndex,
+				key: c.id,
+				place: void 0
+			}));
+		}
+		if (columns !== this.#columns) {
+			this.#columns = columns;
+			this.#scrolling = columns.filter((c) => c.kind === "data" && c.pin === void 0);
+			this.#pinnedWidth = columns.reduce((sum, c) => c.pin ? sum + c.width : sum, 0);
+		}
+		const wanted = new Set(keep);
+		const window = this.#window();
+		for (const i of window) wanted.add(this.#scrolling[i]?.id);
+		this.#key = keyOf(window);
+		const ids = [];
+		const byId = /* @__PURE__ */ new Map();
+		for (const c of columns) if (c.pin !== void 0 || c.kind !== "data" || wanted.has(c.id)) {
+			ids.push(c.id);
+			byId.set(c.id, c);
+		}
+		const rendered = [];
+		for (const { id, slot } of this.#pool.update(ids)) {
+			const c = byId.get(id);
+			if (c) rendered.push({
+				...c,
+				slot,
+				key: slot,
+				place: c.colIndex
+			});
+		}
+		return rendered;
+	}
+	/** The window's indexes in the scrolling columns, for the scroller as it is now. */
+	#window() {
+		const s = this.#attached ?? this.#scroller();
+		const view = Math.max(0, (s ?? this.#host).clientWidth - this.#pinnedWidth);
+		const columns = this.#scrolling;
+		let max = this.#maxVisible;
+		if (max?.columns !== this.#columns || max.view !== view) {
+			max = {
+				columns: this.#columns,
+				view,
+				value: maxVisibleColumns(columns, view)
+			};
+			this.#maxVisible = max;
+		}
+		const offset = Math.abs(s?.scrollLeft ?? 0);
+		return columnWindow(columns, offset, view, 2, max.value);
+	}
+	#attach() {
+		const s = this.#scroller();
+		if (!s || s === this.#attached) return;
+		this.#attached?.removeEventListener("scroll", this.#onScroll);
+		this.#attached = s;
+		s.addEventListener("scroll", this.#onScroll, { passive: true });
+		this.#resize ??= new ResizeObserver(() => {
+			this.#onScroll();
+		});
+		this.#resize.disconnect();
+		this.#resize.observe(s);
+	}
+	/** Renders again when the window moves: not on every scroll event. */
+	#onScroll = () => {
+		if (!this.#enabled) return;
+		if (keyOf(this.#window()) !== this.#key) this.#host.requestUpdate();
+	};
+};
+function keyOf(window) {
+	return `${String(window[0] ?? -1)}:${String(window.length)}`;
+}
+export { ColumnWindowController };
+
+//# sourceMappingURL=column-window.js.map

package/dist/controllers/column-window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-window.js","names":[],"sources":["../../src/controllers/column-window.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { columnWindow, maxVisibleColumns, RowPool, type ColumnView } from '@argus-table/core';\nimport type { CellContent } from '../types.js';\n\n/** Scrolling columns rendered beyond each side of the visible ones. */\nexport const COLUMN_OVERSCAN = 2;\n\n/**\n * A rendered column: the column, the slot its cells and light-DOM content use\n * (`h-{slot}`, `c-{row}-{slot}`), the key its cells are rendered by, and with\n * `virtualizeColumns` the grid track it is placed in.\n */\nexport type RenderedColumn<T> = ColumnView<T, CellContent> & {\n  slot: number;\n  key: unknown;\n  /** Grid column the cells are placed in; `undefined`: in DOM order. */\n  place: number | undefined;\n};\n\ntype Column<T> = ColumnView<T, CellContent>;\n\n/**\n * Column virtualization (`virtualizeColumns`): which columns render, and which\n * pool slot's DOM each one uses.\n *\n * Off, every column renders in visual order, its slot is its `colIndex` and\n * its cells are keyed by column id: the DOM is what it always was.\n *\n * On, the scrolling columns in view render, plus `COLUMN_OVERSCAN` on each\n * side, and the pinned columns, the checkbox column and the columns the table\n * keeps (the active one, one being dragged, auto widths still to measure)\n * whatever the scroll position. They are pooled like rows (ADR 0001): a column\n * entering the view reuses the cells, slots and content of one that left, so\n * the DOM is updated in place, and the window has one size, so the pool fills\n * on the first render and scrolling only reuses it (in WebKit, new slots\n * while scrolling cut a wheel scroll short; see `steadyWindow`). DOM order is\n * then pool order: each cell is placed in its grid column explicitly, and\n * `aria-colindex` carries the position, as `aria-rowindex` does for rows.\n */\nexport class ColumnWindowController<T> implements ReactiveController {\n  readonly #host: ReactiveControllerHost & HTMLElement;\n  readonly #scroller: () => HTMLElement | null;\n  readonly #pool = new RowPool();\n  #attached: HTMLElement | undefined;\n  #resize: ResizeObserver | undefined;\n  #enabled = false;\n  /** The columns of the last render, and what the window was computed from. */\n  #columns: readonly Column<T>[] = [];\n  #scrolling: Column<T>[] = [];\n  #pinnedWidth = 0;\n  #maxVisible: { columns: readonly Column<T>[]; view: number; value: number } | undefined;\n  /** First index and size of the last window rendered. */\n  #key = '';\n\n  constructor(host: ReactiveControllerHost & HTMLElement, scroller: () => HTMLElement | null) {\n    this.#host = host;\n    this.#scroller = scroller;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#attach();\n  }\n\n  hostUpdated(): void {\n    this.#attach();\n  }\n\n  hostDisconnected(): void {\n    this.#attached?.removeEventListener('scroll', this.#onScroll);\n    this.#resize?.disconnect();\n    this.#attached = undefined;\n  }\n\n  /** Number of column pool slots created so far. */\n  get poolSize(): number {\n    return this.#pool.size;\n  }\n\n  /**\n   * The columns to render, given the model's columns in visual order. With\n   * `enabled`, `keep` names columns to render wherever they are. Call once per\n   * render.\n   */\n  compute(\n    columns: readonly Column<T>[],\n    enabled: boolean,\n    keep: Iterable<string | undefined>,\n  ): RenderedColumn<T>[] {\n    this.#enabled = enabled;\n    if (!enabled) {\n      this.#pool.clear();\n      this.#key = '';\n      return columns.map((c) => ({ ...c, slot: c.colIndex, key: c.id, place: undefined }));\n    }\n    if (columns !== this.#columns) {\n      this.#columns = columns;\n      this.#scrolling = columns.filter((c) => c.kind === 'data' && c.pin === undefined);\n      this.#pinnedWidth = columns.reduce((sum, c) => (c.pin ? sum + c.width : sum), 0);\n    }\n    const wanted = new Set<string | undefined>(keep);\n    const window = this.#window();\n    for (const i of window) wanted.add(this.#scrolling[i]?.id);\n    this.#key = keyOf(window);\n    // In visual order, so the first render's slots (and DOM order) follow the columns.\n    const ids: string[] = [];\n    const byId = new Map<string, Column<T>>();\n    for (const c of columns) {\n      if (c.pin !== undefined || c.kind !== 'data' || wanted.has(c.id)) {\n        ids.push(c.id);\n        byId.set(c.id, c);\n      }\n    }\n    const rendered: RenderedColumn<T>[] = [];\n    for (const { id, slot } of this.#pool.update(ids)) {\n      const c = byId.get(id);\n      if (c) rendered.push({ ...c, slot, key: slot, place: c.colIndex });\n    }\n    return rendered;\n  }\n\n  /** The window's indexes in the scrolling columns, for the scroller as it is now. */\n  #window(): number[] {\n    // Before the first render there is no scroller: the host is as wide.\n    const s = this.#attached ?? this.#scroller();\n    const view = Math.max(0, (s ?? this.#host).clientWidth - this.#pinnedWidth);\n    const columns = this.#scrolling;\n    let max = this.#maxVisible;\n    if (max?.columns !== this.#columns || max.view !== view) {\n      max = { columns: this.#columns, view, value: maxVisibleColumns(columns, view) };\n      this.#maxVisible = max;\n    }\n    // Negative in RTL.\n    const offset = Math.abs(s?.scrollLeft ?? 0);\n    return columnWindow(columns, offset, view, COLUMN_OVERSCAN, max.value);\n  }\n\n  #attach(): void {\n    const s = this.#scroller();\n    if (!s || s === this.#attached) return;\n    this.#attached?.removeEventListener('scroll', this.#onScroll);\n    this.#attached = s;\n    s.addEventListener('scroll', this.#onScroll, { passive: true });\n    this.#resize ??= new ResizeObserver(() => {\n      this.#onScroll();\n    });\n    this.#resize.disconnect();\n    this.#resize.observe(s);\n  }\n\n  /** Renders again when the window moves: not on every scroll event. */\n  readonly #onScroll = () => {\n    if (!this.#enabled) return;\n    const window = this.#window();\n    if (keyOf(window) !== this.#key) this.#host.requestUpdate();\n  };\n}\n\nfunction keyOf(window: readonly number[]): string {\n  return `${String(window[0] ?? -1)}:${String(window.length)}`;\n}\n"],"mappings":"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"}

package/dist/controllers/data-controller.js

@@ -1,7 +1,7 @@
 import { PageCache } from "../core/src/data/page-cache.js";
 /**
 * Loads `dataSource` pages for the rendered rows (infinite loading). It owns the
-* page cache: a new source, sort order or row id function starts a fresh one, and
+* page cache: a new source, sort order, filter or row id function starts a fresh one, and
 * answers for an old cache are dropped. Requests wait until the range has been
 * quiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.
 */
@@ -10,6 +10,8 @@ var DataController = class {
 	#config = {
 		source: void 0,
 		sorting: [],
+		filters: {},
+		quickFilter: "",
 		getRowId: void 0
 	};
 	#cache;
@@ -34,8 +36,9 @@ var DataController = class {
 		return this.#cache;
 	}
 	/**
-	* Takes the source, sort order and row id function. Any change starts a fresh
-	* cache; a sort or row id change keeps the row count (the rows are the same).
+	* Takes the source, sort order, filters and row id function. Any change starts a
+	* fresh cache; a sort or row id change keeps the row count (the rows are the same),
+	* a new source or filter doesn't (the rows aren't).
 	*/
 	configure(next) {
 		const prev = this.#config;
@@ -44,7 +47,7 @@ var DataController = class {
 			this.#reset(void 0);
 			return;
 		}
-		if (next.source !== prev.source || !this.#cache) this.#reset({
+		if (next.source !== prev.source || !this.#cache || next.filters !== prev.filters || next.quickFilter !== prev.quickFilter) this.#reset({
 			rowCount: void 0,
 			totalKnown: false
 		});
@@ -147,6 +150,8 @@ var DataController = class {
 				start,
 				end,
 				sorting: this.#config.sorting,
+				filters: this.#config.filters,
+				quickFilter: this.#config.quickFilter,
 				signal: controller.signal
 			}));
 		} catch (error) {

package/dist/controllers/data-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-controller.js","names":[],"sources":["../../src/controllers/data-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport {\n  PageCache,\n  type DataSource,\n  type LoadErrorDetail,\n  type RowState,\n  type SortState,\n} from '@argus-table/core';\n\n/** Rows per request when the data source sets no `pageSize`. */\nexport const DEFAULT_PAGE_SIZE = 100;\n\n/** Quiet time after the last range change before pages load, so fast scrolling loads only where it stops. */\nexport const LOAD_DEBOUNCE_MS = 50;\n\nexport interface DataConfig<T> {\n  source: DataSource<T> | undefined;\n  sorting: SortState;\n  getRowId: ((row: T, index: number) => string) | undefined;\n}\n\n/**\n * Loads `dataSource` pages for the rendered rows (infinite loading). It owns the\n * page cache: a new source, sort order or row id function starts a fresh one, and\n * answers for an old cache are dropped. Requests wait until the range has been\n * quiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.\n */\nexport class DataController<T> implements ReactiveController {\n  readonly #host: ReactiveControllerHost;\n  #config: DataConfig<T> = { source: undefined, sorting: [], getRowId: undefined };\n  #cache: PageCache<T> | undefined;\n  readonly #requests = new Map<number, AbortController>();\n  #range: { start: number; end: number } | undefined;\n  #timer: ReturnType<typeof setTimeout> | undefined;\n  #errors: LoadErrorDetail[] = [];\n\n  constructor(host: ReactiveControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  hostDisconnected(): void {\n    clearTimeout(this.#timer);\n    this.#timer = undefined;\n    this.#abortAll();\n  }\n\n  hostConnected(): void {\n    // Requests aborted on disconnect load again on the next range request.\n    this.#range = undefined;\n  }\n\n  /** The page cache, while a data source is set: the model reads rows from it. */\n  get rows(): PageCache<T> | undefined {\n    return this.#cache;\n  }\n\n  /**\n   * Takes the source, sort order and row id function. Any change starts a fresh\n   * cache; a sort or row id change keeps the row count (the rows are the same).\n   */\n  configure(next: DataConfig<T>): void {\n    const prev = this.#config;\n    this.#config = next;\n    if (!next.source) {\n      this.#reset(undefined);\n      return;\n    }\n    if (next.source !== prev.source || !this.#cache) {\n      this.#reset({ rowCount: undefined, totalKnown: false });\n    } else if (next.sorting !== prev.sorting || next.getRowId !== prev.getRowId) {\n      this.#reset({ rowCount: this.#cache.rowCount, totalKnown: this.#cache.totalKnown });\n    }\n  }\n\n  /** Drops every loaded page and loads the rendered ones again. The row count stays until pages answer. */\n  refresh(): void {\n    if (!this.#cache) return;\n    this.#reset({ rowCount: this.#cache.rowCount, totalKnown: false });\n    this.#host.requestUpdate();\n  }\n\n  stateAt(index: number): RowState {\n    return this.#cache?.stateAt(index) ?? 'loaded';\n  }\n\n  /**\n   * The rendered rows, `start` to `end` (exclusive). Loads what's missing once the\n   * range has been quiet for a moment. Call after every update.\n   */\n  request(start: number, end: number): void {\n    const cache = this.#cache;\n    if (!cache) return;\n    const prev = this.#range;\n    const moved = prev?.start !== start || prev.end !== end;\n    this.#range = { start, end };\n    if (moved) {\n      clearTimeout(this.#timer);\n    } else if (this.#timer !== undefined || cache.missingPages(start, end).length === 0) {\n      return;\n    }\n    this.#timer = setTimeout(() => {\n      this.#timer = undefined;\n      this.#load();\n    }, LOAD_DEBOUNCE_MS);\n  }\n\n  /** Requests the failed page holding row `index` again (the Retry button, or Enter on a failed row). */\n  retry(index: number): void {\n    const cache = this.#cache;\n    const page = cache?.pageOf(index);\n    if (!cache || page === undefined || !cache.isFailed(page)) return;\n    cache.retry(page);\n    this.#range = undefined;\n    this.#host.requestUpdate();\n  }\n\n  /** Load errors since the last call, to fire as `argus-load-error` after the update. */\n  takeErrors(): LoadErrorDetail[] {\n    const errors = this.#errors;\n    this.#errors = [];\n    return errors;\n  }\n\n  #reset(carry: { rowCount: number | undefined; totalKnown: boolean } | undefined): void {\n    clearTimeout(this.#timer);\n    this.#timer = undefined;\n    this.#abortAll();\n    this.#range = undefined;\n    this.#errors = [];\n    const { source, getRowId } = this.#config;\n    this.#cache =\n      source && carry\n        ? new PageCache<T>({\n            pageSize: source.pageSize ?? DEFAULT_PAGE_SIZE,\n            getRowId,\n            rowCount: carry.rowCount,\n            totalKnown: carry.totalKnown,\n          })\n        : undefined;\n  }\n\n  #abortAll(): void {\n    for (const [page, controller] of this.#requests) {\n      controller.abort();\n      this.#cache?.cancel(page);\n    }\n    this.#requests.clear();\n  }\n\n  #load(): void {\n    const cache = this.#cache;\n    const range = this.#range;\n    if (!cache || !range) return;\n    // Keep a page of margin, so a small scroll back doesn't abort a page about to land.\n    const margin = cache.pageSize;\n    for (const page of cache.inFlightOutside(range.start - margin, range.end + margin)) {\n      this.#requests.get(page)?.abort();\n      this.#requests.delete(page);\n      cache.cancel(page);\n    }\n    cache.evictOutside(range.start, range.end);\n    for (const page of cache.missingPages(range.start, range.end)) this.#fetch(cache, page);\n  }\n\n  #fetch(cache: PageCache<T>, page: number): void {\n    const source = this.#config.source;\n    if (!source) return;\n    const { start, end } = cache.begin(page);\n    const controller = new AbortController();\n    this.#requests.set(page, controller);\n    const current = () => !controller.signal.aborted && cache === this.#cache;\n    let pending: Promise<unknown>;\n    try {\n      pending = Promise.resolve(\n        source.getRows({ start, end, sorting: this.#config.sorting, signal: controller.signal }),\n      );\n    } catch (error) {\n      pending = Promise.reject(error instanceof Error ? error : new Error(String(error)));\n    }\n    pending\n      .then((response) => {\n        if (!current()) return;\n        const { rows, total } = (response ?? {}) as { rows?: unknown; total?: unknown };\n        if (!Array.isArray(rows)) {\n          throw new TypeError('argus-table: getRows() must resolve to { rows: [], total? }.');\n        }\n        this.#requests.delete(page);\n        cache.resolve(page, rows as T[], typeof total === 'number' ? total : undefined);\n        this.#host.requestUpdate();\n      })\n      .catch((error: unknown) => {\n        if (!current()) return;\n        this.#requests.delete(page);\n        cache.fail(page);\n        this.#errors.push({ error, start, end });\n        this.#host.requestUpdate();\n      });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-controller.js","names":[],"sources":["../../src/controllers/data-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport {\n  PageCache,\n  type ColumnFilterState,\n  type DataSource,\n  type LoadErrorDetail,\n  type RowState,\n  type SortState,\n} from '@argus-table/core';\n\n/** Rows per request when the data source sets no `pageSize`. */\nexport const DEFAULT_PAGE_SIZE = 100;\n\n/** Quiet time after the last range change before pages load, so fast scrolling loads only where it stops. */\nexport const LOAD_DEBOUNCE_MS = 50;\n\nexport interface DataConfig<T> {\n  source: DataSource<T> | undefined;\n  sorting: SortState;\n  filters: ColumnFilterState;\n  quickFilter: string;\n  getRowId: ((row: T, index: number) => string) | undefined;\n}\n\n/**\n * Loads `dataSource` pages for the rendered rows (infinite loading). It owns the\n * page cache: a new source, sort order, filter or row id function starts a fresh one, and\n * answers for an old cache are dropped. Requests wait until the range has been\n * quiet for `LOAD_DEBOUNCE_MS`; pages that scrolled away are aborted.\n */\nexport class DataController<T> implements ReactiveController {\n  readonly #host: ReactiveControllerHost;\n  #config: DataConfig<T> = {\n    source: undefined,\n    sorting: [],\n    filters: {},\n    quickFilter: '',\n    getRowId: undefined,\n  };\n  #cache: PageCache<T> | undefined;\n  readonly #requests = new Map<number, AbortController>();\n  #range: { start: number; end: number } | undefined;\n  #timer: ReturnType<typeof setTimeout> | undefined;\n  #errors: LoadErrorDetail[] = [];\n\n  constructor(host: ReactiveControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  hostDisconnected(): void {\n    clearTimeout(this.#timer);\n    this.#timer = undefined;\n    this.#abortAll();\n  }\n\n  hostConnected(): void {\n    // Requests aborted on disconnect load again on the next range request.\n    this.#range = undefined;\n  }\n\n  /** The page cache, while a data source is set: the model reads rows from it. */\n  get rows(): PageCache<T> | undefined {\n    return this.#cache;\n  }\n\n  /**\n   * Takes the source, sort order, filters and row id function. Any change starts a\n   * fresh cache; a sort or row id change keeps the row count (the rows are the same),\n   * a new source or filter doesn't (the rows aren't).\n   */\n  configure(next: DataConfig<T>): void {\n    const prev = this.#config;\n    this.#config = next;\n    if (!next.source) {\n      this.#reset(undefined);\n      return;\n    }\n    if (\n      next.source !== prev.source ||\n      !this.#cache ||\n      next.filters !== prev.filters ||\n      next.quickFilter !== prev.quickFilter\n    ) {\n      this.#reset({ rowCount: undefined, totalKnown: false });\n    } else if (next.sorting !== prev.sorting || next.getRowId !== prev.getRowId) {\n      this.#reset({ rowCount: this.#cache.rowCount, totalKnown: this.#cache.totalKnown });\n    }\n  }\n\n  /** Drops every loaded page and loads the rendered ones again. The row count stays until pages answer. */\n  refresh(): void {\n    if (!this.#cache) return;\n    this.#reset({ rowCount: this.#cache.rowCount, totalKnown: false });\n    this.#host.requestUpdate();\n  }\n\n  stateAt(index: number): RowState {\n    return this.#cache?.stateAt(index) ?? 'loaded';\n  }\n\n  /**\n   * The rendered rows, `start` to `end` (exclusive). Loads what's missing once the\n   * range has been quiet for a moment. Call after every update.\n   */\n  request(start: number, end: number): void {\n    const cache = this.#cache;\n    if (!cache) return;\n    const prev = this.#range;\n    const moved = prev?.start !== start || prev.end !== end;\n    this.#range = { start, end };\n    if (moved) {\n      clearTimeout(this.#timer);\n    } else if (this.#timer !== undefined || cache.missingPages(start, end).length === 0) {\n      return;\n    }\n    this.#timer = setTimeout(() => {\n      this.#timer = undefined;\n      this.#load();\n    }, LOAD_DEBOUNCE_MS);\n  }\n\n  /** Requests the failed page holding row `index` again (the Retry button, or Enter on a failed row). */\n  retry(index: number): void {\n    const cache = this.#cache;\n    const page = cache?.pageOf(index);\n    if (!cache || page === undefined || !cache.isFailed(page)) return;\n    cache.retry(page);\n    this.#range = undefined;\n    this.#host.requestUpdate();\n  }\n\n  /** Load errors since the last call, to fire as `argus-load-error` after the update. */\n  takeErrors(): LoadErrorDetail[] {\n    const errors = this.#errors;\n    this.#errors = [];\n    return errors;\n  }\n\n  #reset(carry: { rowCount: number | undefined; totalKnown: boolean } | undefined): void {\n    clearTimeout(this.#timer);\n    this.#timer = undefined;\n    this.#abortAll();\n    this.#range = undefined;\n    this.#errors = [];\n    const { source, getRowId } = this.#config;\n    this.#cache =\n      source && carry\n        ? new PageCache<T>({\n            pageSize: source.pageSize ?? DEFAULT_PAGE_SIZE,\n            getRowId,\n            rowCount: carry.rowCount,\n            totalKnown: carry.totalKnown,\n          })\n        : undefined;\n  }\n\n  #abortAll(): void {\n    for (const [page, controller] of this.#requests) {\n      controller.abort();\n      this.#cache?.cancel(page);\n    }\n    this.#requests.clear();\n  }\n\n  #load(): void {\n    const cache = this.#cache;\n    const range = this.#range;\n    if (!cache || !range) return;\n    // Keep a page of margin, so a small scroll back doesn't abort a page about to land.\n    const margin = cache.pageSize;\n    for (const page of cache.inFlightOutside(range.start - margin, range.end + margin)) {\n      this.#requests.get(page)?.abort();\n      this.#requests.delete(page);\n      cache.cancel(page);\n    }\n    cache.evictOutside(range.start, range.end);\n    for (const page of cache.missingPages(range.start, range.end)) this.#fetch(cache, page);\n  }\n\n  #fetch(cache: PageCache<T>, page: number): void {\n    const source = this.#config.source;\n    if (!source) return;\n    const { start, end } = cache.begin(page);\n    const controller = new AbortController();\n    this.#requests.set(page, controller);\n    const current = () => !controller.signal.aborted && cache === this.#cache;\n    let pending: Promise<unknown>;\n    try {\n      pending = Promise.resolve(\n        source.getRows({\n          start,\n          end,\n          sorting: this.#config.sorting,\n          filters: this.#config.filters,\n          quickFilter: this.#config.quickFilter,\n          signal: controller.signal,\n        }),\n      );\n    } catch (error) {\n      pending = Promise.reject(error instanceof Error ? error : new Error(String(error)));\n    }\n    pending\n      .then((response) => {\n        if (!current()) return;\n        const { rows, total } = (response ?? {}) as { rows?: unknown; total?: unknown };\n        if (!Array.isArray(rows)) {\n          throw new TypeError('argus-table: getRows() must resolve to { rows: [], total? }.');\n        }\n        this.#requests.delete(page);\n        cache.resolve(page, rows as T[], typeof total === 'number' ? total : undefined);\n        this.#host.requestUpdate();\n      })\n      .catch((error: unknown) => {\n        if (!current()) return;\n        this.#requests.delete(page);\n        cache.fail(page);\n        this.#errors.push({ error, start, end });\n        this.#host.requestUpdate();\n      });\n  }\n}\n"],"mappings":"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"}

package/dist/controllers/plugins.js

@@ -0,0 +1,102 @@
+// src/controllers/plugins.ts
+/**
+* Runs the table's plugins: connects them while the table is connected (in
+* array order, cleaning up in reverse), chains their column transforms, and
+* offers keys to them before the table handles them. A hook that throws is
+* reported and skipped, so a broken plugin can't break the update.
+*/
+var PluginController = class {
+	#host;
+	#api;
+	#plugins = [];
+	/** Connected plugins and their cleanups. */
+	#connected = /* @__PURE__ */ new Map();
+	/** Plugins whose `connect` threw: off until `plugins` changes. */
+	#failed = /* @__PURE__ */ new Set();
+	#version = 0;
+	#memo;
+	constructor(host, api) {
+		this.#host = host;
+		this.#api = api;
+		host.addController(this);
+	}
+	/** Takes a new plugin list; connects and cleans up to match it if the host is connected. */
+	set(plugins) {
+		if (plugins === this.#plugins) return;
+		this.#plugins = plugins;
+		this.#failed.clear();
+		if (this.#host.isConnected) this.#sync();
+	}
+	hostConnected() {
+		this.#sync();
+	}
+	hostDisconnected() {
+		for (const plugin of [...this.#connected.keys()].reverse()) this.#disconnect(plugin);
+	}
+	/** The plugins' `columns` transforms applied in order; the same array while nothing changed. */
+	transform(input) {
+		const memo = this.#memo;
+		if (memo?.input === input && memo.plugins === this.#plugins && memo.version === this.#version) return memo.output;
+		let output = input;
+		for (const plugin of this.#plugins) {
+			if (!plugin.columns || this.#failed.has(plugin)) continue;
+			const before = output;
+			const result = this.#guard(plugin, "columns", () => plugin.columns?.(before, this.#api));
+			if (result.ok && result.value) output = result.value;
+		}
+		if (memo && sameItems(memo.output, output)) output = memo.output;
+		this.#memo = {
+			input,
+			plugins: this.#plugins,
+			version: this.#version,
+			output
+		};
+		return output;
+	}
+	/** Runs the transforms again on the next `transform()`. */
+	invalidate() {
+		this.#version++;
+	}
+	/** Offers a key to the plugins in order; `true` once one claims it. */
+	keydown(event, target) {
+		for (const plugin of this.#plugins) {
+			if (!plugin.keydown || this.#failed.has(plugin)) continue;
+			const result = this.#guard(plugin, "keydown", () => plugin.keydown?.(event, target, this.#api));
+			if (result.ok && result.value === true) return true;
+		}
+		return false;
+	}
+	#sync() {
+		const wanted = new Set(this.#plugins);
+		for (const plugin of [...this.#connected.keys()].reverse()) if (!wanted.has(plugin)) this.#disconnect(plugin);
+		for (const plugin of this.#plugins) {
+			if (this.#connected.has(plugin) || this.#failed.has(plugin)) continue;
+			const result = this.#guard(plugin, "connect", () => plugin.connect?.(this.#api));
+			if (result.ok) this.#connected.set(plugin, result.value);
+			else this.#failed.add(plugin);
+		}
+	}
+	#disconnect(plugin) {
+		const cleanup = this.#connected.get(plugin);
+		this.#connected.delete(plugin);
+		if (cleanup) this.#guard(plugin, "cleanup", cleanup);
+	}
+	#guard(plugin, hook, run) {
+		try {
+			return {
+				ok: true,
+				value: run()
+			};
+		} catch (error) {
+			console.error(`argus-table: plugin "${plugin.name}" threw in ${hook}`, error);
+			return { ok: false };
+		}
+	}
+};
+/** Whether two lists hold the same items in the same order. */
+function sameItems(a, b) {
+	return a.length === b.length && a.every((item, i) => item === b[i]);
+}
+export { PluginController, sameItems };
+
+//# sourceMappingURL=plugins.js.map

package/dist/controllers/plugins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins.js","names":[],"sources":["../../src/controllers/plugins.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { ArgusPlugin, CellTarget, PluginHost } from '../plugins.js';\nimport type { ColumnDef } from '../types.js';\n\ntype Hook = 'connect' | 'cleanup' | 'columns' | 'keydown';\n\n/**\n * Runs the table's plugins: connects them while the table is connected (in\n * array order, cleaning up in reverse), chains their column transforms, and\n * offers keys to them before the table handles them. A hook that throws is\n * reported and skipped, so a broken plugin can't break the update.\n */\nexport class PluginController<T> implements ReactiveController {\n  readonly #host: ReactiveControllerHost & HTMLElement;\n  readonly #api: PluginHost<T>;\n  #plugins: readonly ArgusPlugin<T>[] = [];\n  /** Connected plugins and their cleanups. */\n  readonly #connected = new Map<ArgusPlugin<T>, (() => void) | undefined>();\n  /** Plugins whose `connect` threw: off until `plugins` changes. */\n  readonly #failed = new Set<ArgusPlugin<T>>();\n  #version = 0;\n  #memo:\n    | {\n        input: readonly ColumnDef<T>[];\n        plugins: readonly ArgusPlugin<T>[];\n        version: number;\n        output: readonly ColumnDef<T>[];\n      }\n    | undefined;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, api: PluginHost<T>) {\n    this.#host = host;\n    this.#api = api;\n    host.addController(this);\n  }\n\n  /** Takes a new plugin list; connects and cleans up to match it if the host is connected. */\n  set(plugins: readonly ArgusPlugin<T>[]): void {\n    if (plugins === this.#plugins) return;\n    this.#plugins = plugins;\n    this.#failed.clear();\n    if (this.#host.isConnected) this.#sync();\n  }\n\n  hostConnected(): void {\n    this.#sync();\n  }\n\n  hostDisconnected(): void {\n    for (const plugin of [...this.#connected.keys()].reverse()) this.#disconnect(plugin);\n  }\n\n  /** The plugins' `columns` transforms applied in order; the same array while nothing changed. */\n  transform(input: readonly ColumnDef<T>[]): readonly ColumnDef<T>[] {\n    const memo = this.#memo;\n    if (memo?.input === input && memo.plugins === this.#plugins && memo.version === this.#version) {\n      return memo.output;\n    }\n    let output = input;\n    for (const plugin of this.#plugins) {\n      if (!plugin.columns || this.#failed.has(plugin)) continue;\n      const before = output;\n      const result = this.#guard(plugin, 'columns', () => plugin.columns?.(before, this.#api));\n      if (result.ok && result.value) output = result.value;\n    }\n    // Plugins may return a fresh array each time: keep the old one when its items are the same.\n    if (memo && sameItems(memo.output, output)) output = memo.output;\n    this.#memo = { input, plugins: this.#plugins, version: this.#version, output };\n    return output;\n  }\n\n  /** Runs the transforms again on the next `transform()`. */\n  invalidate(): void {\n    this.#version++;\n  }\n\n  /** Offers a key to the plugins in order; `true` once one claims it. */\n  keydown(event: KeyboardEvent, target: CellTarget): boolean {\n    for (const plugin of this.#plugins) {\n      if (!plugin.keydown || this.#failed.has(plugin)) continue;\n      const result = this.#guard(plugin, 'keydown', () =>\n        plugin.keydown?.(event, target, this.#api),\n      );\n      if (result.ok && result.value === true) return true;\n    }\n    return false;\n  }\n\n  #sync(): void {\n    const wanted = new Set(this.#plugins);\n    for (const plugin of [...this.#connected.keys()].reverse()) {\n      if (!wanted.has(plugin)) this.#disconnect(plugin);\n    }\n    for (const plugin of this.#plugins) {\n      if (this.#connected.has(plugin) || this.#failed.has(plugin)) continue;\n      const result = this.#guard(plugin, 'connect', () => plugin.connect?.(this.#api));\n      if (result.ok) this.#connected.set(plugin, result.value);\n      else this.#failed.add(plugin);\n    }\n  }\n\n  #disconnect(plugin: ArgusPlugin<T>): void {\n    const cleanup = this.#connected.get(plugin);\n    this.#connected.delete(plugin);\n    if (cleanup) this.#guard(plugin, 'cleanup', cleanup);\n  }\n\n  #guard<R>(\n    plugin: ArgusPlugin<T>,\n    hook: Hook,\n    run: () => R,\n  ): { ok: true; value: R } | { ok: false } {\n    try {\n      return { ok: true, value: run() };\n    } catch (error) {\n      console.error(`argus-table: plugin \"${plugin.name}\" threw in ${hook}`, error);\n      return { ok: false };\n    }\n  }\n}\n\n/** Whether two lists hold the same items in the same order. */\nexport function sameItems<V>(a: readonly V[], b: readonly V[]): boolean {\n  return a.length === b.length && a.every((item, i) => item === b[i]);\n}\n"],"mappings":"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"}

package/dist/controllers/reorder-drag.js

@@ -1,19 +1,19 @@
+import "../interactive.js";
 // src/controllers/reorder-drag.ts
 /**
 * The drop target for a pointer at `x`: the gap between headers nearest to it,
 * decided by each header's midpoint. `undefined` where the column would stay
 * put. `direction` is 1 in LTR and -1 in RTL, where the group runs right to left.
+* The slots needn't be next to each other in the order: with
+* `virtualizeColumns`, headers out of view aren't rendered.
 */
 function dropTarget(slots, draggedId, x, direction) {
-	const from = slots.findIndex((s) => s.id === draggedId);
-	const first = slots[0];
+	const dragged = slots.find((s) => s.id === draggedId);
 	const last = slots.at(-1);
-	if (from < 0 || !first || !last) return void 0;
-	let gap = slots.findIndex((s) => (x - (s.rect.left + s.rect.right) / 2) * direction < 0);
-	if (gap < 0) gap = slots.length;
-	if (gap === from || gap === from + 1) return void 0;
-	const to = first.index + (gap > from ? gap - 1 : gap);
-	const at = slots[gap];
+	if (!dragged || !last) return void 0;
+	const at = slots.find((s) => (x - (s.rect.left + s.rect.right) / 2) * direction < 0);
+	const to = at ? at.index > dragged.index ? at.index - 1 : at.index : last.index >= dragged.index ? last.index : last.index + 1;
+	if (to === dragged.index) return void 0;
 	return at ? {
 		to,
 		columnId: at.id,
@@ -29,7 +29,6 @@ var THRESHOLD = 4;
 /** Width of the band at the scroll area's edges that scrolls, and the top speed there. */
 var EDGE = 40;
 var MAX_SPEED = 16;
-var INTERACTIVE = "button,input,select,textarea,a[href],label,[contenteditable]";
 /**
 * Whether a press on a header may start a reorder drag: the primary button of a
 * mouse or pen (a touch pans the table instead), not on a resize handle, and not
@@ -41,7 +40,7 @@ function canStartReorder(down, cell) {
 		if (target === cell) return true;
 		if (!(target instanceof Element)) continue;
 		if (target instanceof HTMLElement && target.dataset.resizeCol !== void 0) return false;
-		if (target.matches(INTERACTIVE)) return false;
+		if (target.matches("button,input,select,textarea,a[href],label,[contenteditable],[popover],dialog")) return false;
 	}
 	return false;
 }

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 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 * 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  // Taking the column out shifts the ones after it one place back.\n  const to = at\n    ? at.index > dragged.index\n      ? at.index - 1\n      : at.index\n    : last.index >= dragged.index\n      ? last.index\n      : last.index + 1;\n  if (to === dragged.index) return undefined;\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\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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"}