argus-table 0.1.0 → 0.2.0

package/dist/controllers/auto-width.js

@@ -0,0 +1,89 @@
+// src/controllers/auto-width.ts
+/**
+* The width each column's content needs, in px, from the cells rendered now:
+* the header, the pinned rows and the rendered body rows. Rows that haven't
+* loaded are skipped (their skeleton bars say nothing about the content).
+*
+* Every cell of the columns gets `data-measure`, which sizes it to its
+* `max-content` (base styles), so the browser accounts for padding, the sort
+* indicator and whatever the content is. One forced layout, no paint: the
+* attribute is gone before the frame ends. A column with nothing laid out
+* (the table is hidden) is left out.
+*/
+function measureColumns(root, ids) {
+	const wanted = new Set(ids);
+	const widths = /* @__PURE__ */ new Map();
+	if (wanted.size === 0) return widths;
+	const cells = [...root.querySelectorAll("[data-col]")].filter((cell) => wanted.has(cell.dataset.col ?? "") && !cell.parentElement?.matches("[part~=\"row-loading\"]"));
+	for (const cell of cells) cell.setAttribute("data-measure", "");
+	for (const cell of cells) {
+		const id = cell.dataset.col ?? "";
+		const px = Math.ceil(cell.getBoundingClientRect().width);
+		if (px > 0 && px > (widths.get(id) ?? 0)) widths.set(id, px);
+	}
+	for (const cell of cells) cell.removeAttribute("data-measure");
+	return widths;
+}
+/**
+* Widths of `width: 'auto'` columns. A column measures once its first loaded
+* rows render, and before that fits the header and pinned rows. So each column
+* is measured at most twice (three times if fonts were still loading), and a
+* table that stays empty doesn't measure on every update. State is keyed by
+* column id, so new `columns` arrays with the same ids don't measure again.
+*/
+var AutoWidths = class {
+	#state;
+	#fontsPending;
+	#requestUpdate;
+	constructor(requestUpdate) {
+		this.widths = {};
+		this.#state = /* @__PURE__ */ new Map();
+		this.#fontsPending = false;
+		this.#requestUpdate = requestUpdate;
+	}
+	/** Forgets columns that are gone or no longer `'auto'`, given the ids of the auto columns. */
+	sync(ids) {
+		const auto = new Set(ids);
+		for (const id of this.#state.keys()) if (!auto.has(id)) this.#state.delete(id);
+		const kept = Object.entries(this.widths).filter(([id]) => auto.has(id));
+		if (kept.length !== Object.keys(this.widths).length) this.widths = Object.fromEntries(kept);
+	}
+	/**
+	* 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).
+	*/
+	measure(root, columns, hasLoadedRows) {
+		const due = columns.filter((c) => c.auto).map((c) => c.id).filter((id) => {
+			const state = this.#state.get(id);
+			return state === void 0 || state === "provisional" && hasLoadedRows;
+		});
+		if (due.length === 0) return false;
+		const measured = measureColumns(root, due);
+		const fontsLoading = typeof document !== "undefined" && document.fonts.status === "loading";
+		let next;
+		for (const [id, px] of measured) {
+			this.#state.set(id, fontsLoading ? "fonts" : hasLoadedRows ? "final" : "provisional");
+			if (this.widths[id] !== px) (next ??= { ...this.widths })[id] = px;
+		}
+		if (fontsLoading && measured.size > 0) this.#remeasureAfterFonts();
+		if (next) this.widths = next;
+		return next !== void 0;
+	}
+	/** Once web fonts are ready, columns measured meanwhile measure again. */
+	#remeasureAfterFonts() {
+		if (this.#fontsPending) return;
+		this.#fontsPending = true;
+		document.fonts.ready.then(() => {
+			this.#fontsPending = false;
+			let any = false;
+			for (const [id, state] of this.#state) if (state === "fonts") {
+				this.#state.delete(id);
+				any = true;
+			}
+			if (any) this.#requestUpdate();
+		});
+	}
+};
+export { AutoWidths, measureColumns };
+
+//# sourceMappingURL=auto-width.js.map

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

@@ -0,0 +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"}

package/dist/controllers/column-children.js

@@ -0,0 +1,41 @@
+import { ArgusColumn, unwatchColumns, watchColumns } from "../argus-column.js";
+// src/controllers/column-children.ts
+/**
+* Reads the host's `<argus-column>` children into `ColumnDef`s. The columns tell
+* the host when they change (`watchColumns`); the list is rebuilt only then, so
+* `defs` keeps its identity between changes.
+*/
+var ColumnChildrenController = class {
+	#host;
+	#defs = [];
+	#dirty = true;
+	constructor(host) {
+		this.#host = host;
+		host.addController(this);
+	}
+	hostConnected() {
+		this.#dirty = true;
+		watchColumns(this.#host, () => {
+			this.#dirty = true;
+			this.#host.requestUpdate();
+		});
+	}
+	hostDisconnected() {
+		unwatchColumns(this.#host);
+	}
+	/** Whether the host has any `<argus-column>` child. */
+	get present() {
+		return this.defs.length > 0;
+	}
+	/** The children's columns, in document order. */
+	get defs() {
+		if (this.#dirty) {
+			this.#dirty = false;
+			this.#defs = [...this.#host.children].filter((c) => c instanceof ArgusColumn).map((c) => c.toColumnDef());
+		}
+		return this.#defs;
+	}
+};
+export { ColumnChildrenController };
+
+//# sourceMappingURL=column-children.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-children.js","names":[],"sources":["../../src/controllers/column-children.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { ArgusColumn, unwatchColumns, watchColumns } from '../argus-column.js';\nimport type { ColumnDef } from '../types.js';\n\n/**\n * Reads the host's `<argus-column>` children into `ColumnDef`s. The columns tell\n * the host when they change (`watchColumns`); the list is rebuilt only then, so\n * `defs` keeps its identity between changes.\n */\nexport class ColumnChildrenController<T> implements ReactiveController {\n  readonly #host: ReactiveControllerHost & HTMLElement;\n  #defs: readonly ColumnDef<T>[] = [];\n  #dirty = true;\n\n  constructor(host: ReactiveControllerHost & HTMLElement) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#dirty = true;\n    watchColumns(this.#host, () => {\n      this.#dirty = true;\n      this.#host.requestUpdate();\n    });\n  }\n\n  hostDisconnected(): void {\n    unwatchColumns(this.#host);\n  }\n\n  /** Whether the host has any `<argus-column>` child. */\n  get present(): boolean {\n    return this.defs.length > 0;\n  }\n\n  /** The children's columns, in document order. */\n  get defs(): readonly ColumnDef<T>[] {\n    if (this.#dirty) {\n      this.#dirty = false;\n      this.#defs = [...this.#host.children]\n        .filter((c): c is ArgusColumn<T> => c instanceof ArgusColumn)\n        .map((c) => c.toColumnDef());\n    }\n    return this.#defs;\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,2BAAb,MAAuE;CACrE;CACA,QAAiC,CAAC;CAClC,SAAS;CAET,YAAY,MAA4C;EACtD,KAAK,QAAQ;EACb,KAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,KAAK,SAAS;EACd,aAAa,KAAK,aAAa;GAC7B,KAAK,SAAS;GACd,KAAK,MAAM,cAAc;EAC3B,CAAC;CACH;CAEA,mBAAyB;EACvB,eAAe,KAAK,KAAK;CAC3B;;CAGA,IAAI,UAAmB;EACrB,OAAO,KAAK,KAAK,SAAS;CAC5B;;CAGA,IAAI,OAAgC;EAClC,IAAI,KAAK,QAAQ;GACf,KAAK,SAAS;GACd,KAAK,QAAQ,CAAC,GAAG,KAAK,MAAM,QAAQ,CAAC,CAClC,QAAQ,MAA2B,aAAa,WAAW,CAAC,CAC5D,KAAK,MAAM,EAAE,YAAY,CAAC;EAC/B;EACA,OAAO,KAAK;CACd;AACF"}

package/dist/controllers/data-controller.js

@@ -0,0 +1,177 @@
+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
+* 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.
+*/
+var DataController = class {
+	#host;
+	#config = {
+		source: void 0,
+		sorting: [],
+		getRowId: void 0
+	};
+	#cache;
+	#requests = /* @__PURE__ */ new Map();
+	#range;
+	#timer;
+	#errors = [];
+	constructor(host) {
+		this.#host = host;
+		host.addController(this);
+	}
+	hostDisconnected() {
+		clearTimeout(this.#timer);
+		this.#timer = void 0;
+		this.#abortAll();
+	}
+	hostConnected() {
+		this.#range = void 0;
+	}
+	/** The page cache, while a data source is set: the model reads rows from it. */
+	get rows() {
+		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).
+	*/
+	configure(next) {
+		const prev = this.#config;
+		this.#config = next;
+		if (!next.source) {
+			this.#reset(void 0);
+			return;
+		}
+		if (next.source !== prev.source || !this.#cache) this.#reset({
+			rowCount: void 0,
+			totalKnown: false
+		});
+		else if (next.sorting !== prev.sorting || next.getRowId !== prev.getRowId) this.#reset({
+			rowCount: this.#cache.rowCount,
+			totalKnown: this.#cache.totalKnown
+		});
+	}
+	/** Drops every loaded page and loads the rendered ones again. The row count stays until pages answer. */
+	refresh() {
+		if (!this.#cache) return;
+		this.#reset({
+			rowCount: this.#cache.rowCount,
+			totalKnown: false
+		});
+		this.#host.requestUpdate();
+	}
+	stateAt(index) {
+		return this.#cache?.stateAt(index) ?? "loaded";
+	}
+	/**
+	* The rendered rows, `start` to `end` (exclusive). Loads what's missing once the
+	* range has been quiet for a moment. Call after every update.
+	*/
+	request(start, end) {
+		const cache = this.#cache;
+		if (!cache) return;
+		const prev = this.#range;
+		const moved = prev?.start !== start || prev.end !== end;
+		this.#range = {
+			start,
+			end
+		};
+		if (moved) clearTimeout(this.#timer);
+		else if (this.#timer !== void 0 || cache.missingPages(start, end).length === 0) return;
+		this.#timer = setTimeout(() => {
+			this.#timer = void 0;
+			this.#load();
+		}, 50);
+	}
+	/** Requests the failed page holding row `index` again (the Retry button, or Enter on a failed row). */
+	retry(index) {
+		const cache = this.#cache;
+		const page = cache?.pageOf(index);
+		if (!cache || page === void 0 || !cache.isFailed(page)) return;
+		cache.retry(page);
+		this.#range = void 0;
+		this.#host.requestUpdate();
+	}
+	/** Load errors since the last call, to fire as `argus-load-error` after the update. */
+	takeErrors() {
+		const errors = this.#errors;
+		this.#errors = [];
+		return errors;
+	}
+	#reset(carry) {
+		clearTimeout(this.#timer);
+		this.#timer = void 0;
+		this.#abortAll();
+		this.#range = void 0;
+		this.#errors = [];
+		const { source, getRowId } = this.#config;
+		this.#cache = source && carry ? new PageCache({
+			pageSize: source.pageSize ?? 100,
+			getRowId,
+			rowCount: carry.rowCount,
+			totalKnown: carry.totalKnown
+		}) : void 0;
+	}
+	#abortAll() {
+		for (const [page, controller] of this.#requests) {
+			controller.abort();
+			this.#cache?.cancel(page);
+		}
+		this.#requests.clear();
+	}
+	#load() {
+		const cache = this.#cache;
+		const range = this.#range;
+		if (!cache || !range) return;
+		const margin = cache.pageSize;
+		for (const page of cache.inFlightOutside(range.start - margin, range.end + margin)) {
+			this.#requests.get(page)?.abort();
+			this.#requests.delete(page);
+			cache.cancel(page);
+		}
+		cache.evictOutside(range.start, range.end);
+		for (const page of cache.missingPages(range.start, range.end)) this.#fetch(cache, page);
+	}
+	#fetch(cache, page) {
+		const source = this.#config.source;
+		if (!source) return;
+		const { start, end } = cache.begin(page);
+		const controller = new AbortController();
+		this.#requests.set(page, controller);
+		const current = () => !controller.signal.aborted && cache === this.#cache;
+		let pending;
+		try {
+			pending = Promise.resolve(source.getRows({
+				start,
+				end,
+				sorting: this.#config.sorting,
+				signal: controller.signal
+			}));
+		} catch (error) {
+			pending = Promise.reject(error instanceof Error ? error : new Error(String(error)));
+		}
+		pending.then((response) => {
+			if (!current()) return;
+			const { rows, total } = response ?? {};
+			if (!Array.isArray(rows)) throw new TypeError("argus-table: getRows() must resolve to { rows: [], total? }.");
+			this.#requests.delete(page);
+			cache.resolve(page, rows, typeof total === "number" ? total : void 0);
+			this.#host.requestUpdate();
+		}).catch((error) => {
+			if (!current()) return;
+			this.#requests.delete(page);
+			cache.fail(page);
+			this.#errors.push({
+				error,
+				start,
+				end
+			});
+			this.#host.requestUpdate();
+		});
+	}
+};
+export { DataController };
+
+//# sourceMappingURL=data-controller.js.map

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

@@ -0,0 +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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"}

package/dist/controllers/reorder-drag.js

@@ -0,0 +1,160 @@
+// 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.
+*/
+function dropTarget(slots, draggedId, x, direction) {
+	const from = slots.findIndex((s) => s.id === draggedId);
+	const first = slots[0];
+	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];
+	return at ? {
+		to,
+		columnId: at.id,
+		edge: "start"
+	} : {
+		to,
+		columnId: last.id,
+		edge: "end"
+	};
+}
+/** Movement before a press becomes a drag, so a click still sorts. */
+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
+* in interactive content slotted into the header.
+*/
+function canStartReorder(down, cell) {
+	if (down.button !== 0 || down.pointerType === "touch") return false;
+	for (const target of down.composedPath()) {
+		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;
+	}
+	return false;
+}
+/**
+* One pointer drag of a column header. It becomes a drag after a few pixels of
+* movement; until then the press is a click. While dragging, the pointer is
+* captured by the header, the target follows the pointer once per frame, and the
+* scroll area scrolls near its edges. Escape cancels. The click that ends a drag
+* is swallowed, so it neither sorts nor counts as a cell click.
+*/
+function startReorderDrag(cell, down, options) {
+	const view = cell.ownerDocument.defaultView ?? window;
+	const startX = down.clientX;
+	const startY = down.clientY;
+	let x = startX;
+	let dragging = false;
+	let frame = 0;
+	let target;
+	const same = (a, b) => a?.to === b?.to && a?.columnId === b?.columnId && a?.edge === b?.edge;
+	const tick = () => {
+		frame = 0;
+		if (!dragging) return;
+		const area = options.scrollArea();
+		if (area) {
+			const speed = x < area.left + EDGE ? -Math.min(1, (area.left + EDGE - x) / EDGE) : x > area.right - EDGE ? Math.min(1, (x - (area.right - EDGE)) / EDGE) : 0;
+			if (speed !== 0) options.scroller.scrollLeft += Math.round(speed * MAX_SPEED);
+			x = Math.min(Math.max(x, area.left), area.right);
+		}
+		const next = options.targetAt(x);
+		if (!same(next, target)) {
+			target = next;
+			options.onTarget(target);
+		}
+		frame = view.requestAnimationFrame(tick);
+	};
+	const listeners = new AbortController();
+	const cleanup = (event) => {
+		if (frame) view.cancelAnimationFrame(frame);
+		frame = 0;
+		listeners.abort();
+		if (event && cell.hasPointerCapture(event.pointerId)) cell.releasePointerCapture(event.pointerId);
+	};
+	const move = (event) => {
+		if (event.pointerId !== down.pointerId) return;
+		x = event.clientX;
+		if (!dragging) {
+			if (Math.hypot(x - startX, event.clientY - startY) < THRESHOLD) return;
+			dragging = true;
+			try {
+				cell.setPointerCapture(event.pointerId);
+			} catch {}
+			options.onStart();
+		}
+		event.preventDefault();
+		frame ||= view.requestAnimationFrame(tick);
+	};
+	const up = (event) => {
+		if (event.pointerId !== down.pointerId) return;
+		cleanup(event);
+		if (!dragging) return;
+		x = event.clientX;
+		const area = options.scrollArea();
+		if (area) x = Math.min(Math.max(x, area.left), area.right);
+		swallowClick(view);
+		options.onDrop(options.targetAt(x));
+	};
+	const cancel = (event) => {
+		if (event.pointerId !== down.pointerId) return;
+		cleanup(event);
+		if (dragging) options.onCancel();
+	};
+	const key = (event) => {
+		if (!dragging || event.key !== "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		cleanup();
+		swallowClick(view, false);
+		options.onCancel();
+	};
+	const listen = {
+		capture: true,
+		signal: listeners.signal
+	};
+	view.addEventListener("pointermove", move, listen);
+	view.addEventListener("pointerup", up, listen);
+	view.addEventListener("pointercancel", cancel, listen);
+	view.addEventListener("keydown", key, listen);
+}
+/**
+* Stops the click that follows the release of a drag, if one comes. It comes in
+* the same task as the release, so the guard goes once that task is over. After
+* Escape the pointer is still down (`released: false`): the guard waits for its release.
+*/
+function swallowClick(view, released = true) {
+	const stop = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const remove = () => {
+		setTimeout(() => {
+			view.removeEventListener("click", stop, { capture: true });
+		});
+	};
+	view.addEventListener("click", stop, {
+		capture: true,
+		once: true
+	});
+	if (released) remove();
+	else view.addEventListener("pointerup", remove, {
+		capture: true,
+		once: true
+	});
+}
+export { canStartReorder, dropTarget, startReorderDrag };
+
+//# sourceMappingURL=reorder-drag.js.map

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

@@ -0,0 +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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"}

package/dist/controllers/resize-drag.js

@@ -16,7 +16,10 @@ function startResizeDrag(handle, down, startWidth, direction, onWidth) {
 		if (pending !== void 0) onWidth(pending);
 		pending = void 0;
 	};
+	let moved = false;
 	const move = (event) => {
+		moved ||= event.clientX !== startX;
+		if (!moved) return;
 		pending = startWidth + (event.clientX - startX) * direction;
 		frame ||= requestAnimationFrame(flush);
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"resize-drag.js","names":[],"sources":["../../src/controllers/resize-drag.ts"],"sourcesContent":["/**\n * One pointer drag on a resize handle. The pointer is captured, so the drag keeps\n * working outside the handle, and moves are batched to one `onWidth` call per\n * animation frame (TanStack's `onChange` mode: the width updates while dragging).\n *\n * `direction` is 1 in LTR and -1 in RTL: the handle sits on the inline-end edge,\n * so moving toward the inline end always grows the column.\n */\nexport function startResizeDrag(\n  handle: HTMLElement,\n  down: PointerEvent,\n  startWidth: number,\n  direction: 1 | -1,\n  onWidth: (width: number) => void,\n): void {\n  const startX = down.clientX;\n  let frame = 0;\n  let pending: number | undefined;\n\n  const flush = () => {\n    frame = 0;\n    if (pending !== undefined) onWidth(pending);\n    pending = undefined;\n  };\n  const move = (event: PointerEvent) => {\n    pending = startWidth + (event.clientX - startX) * direction;\n    frame ||= requestAnimationFrame(flush);\n  };\n  const end = (event: PointerEvent) => {\n    if (event.type === 'pointerup') move(event);\n    if (frame) cancelAnimationFrame(frame);\n    flush();\n    handle.removeAttribute('data-active');\n    handle.removeEventListener('pointermove', move);\n    handle.removeEventListener('pointerup', end);\n    handle.removeEventListener('pointercancel', end);\n    if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);\n  };\n\n  down.preventDefault();\n  try {\n    handle.setPointerCapture(down.pointerId);\n  } catch {\n    // Synthetic or already released pointers can't be captured; moves on the handle still work.\n  }\n  handle.setAttribute('data-active', '');\n  handle.addEventListener('pointermove', move);\n  handle.addEventListener('pointerup', end);\n  handle.addEventListener('pointercancel', end);\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,gBACd,QACA,MACA,YACA,WACA,SACM;CACN,MAAM,SAAS,KAAK;CACpB,IAAI,QAAQ;CACZ,IAAI;CAEJ,MAAM,cAAc;EAClB,QAAQ;EACR,IAAI,YAAY,KAAA,GAAW,QAAQ,OAAO;EAC1C,UAAU,KAAA;CACZ;CACA,MAAM,QAAQ,UAAwB;EACpC,UAAU,cAAc,MAAM,UAAU,UAAU;EAClD,UAAU,sBAAsB,KAAK;CACvC;CACA,MAAM,OAAO,UAAwB;EACnC,IAAI,MAAM,SAAS,aAAa,KAAK,KAAK;EAC1C,IAAI,OAAO,qBAAqB,KAAK;EACrC,MAAM;EACN,OAAO,gBAAgB,aAAa;EACpC,OAAO,oBAAoB,eAAe,IAAI;EAC9C,OAAO,oBAAoB,aAAa,GAAG;EAC3C,OAAO,oBAAoB,iBAAiB,GAAG;EAC/C,IAAI,OAAO,kBAAkB,MAAM,SAAS,GAAG,OAAO,sBAAsB,MAAM,SAAS;CAC7F;CAEA,KAAK,eAAe;CACpB,IAAI;EACF,OAAO,kBAAkB,KAAK,SAAS;CACzC,QAAQ,CAER;CACA,OAAO,aAAa,eAAe,EAAE;CACrC,OAAO,iBAAiB,eAAe,IAAI;CAC3C,OAAO,iBAAiB,aAAa,GAAG;CACxC,OAAO,iBAAiB,iBAAiB,GAAG;AAC9C"}
+{"version":3,"file":"resize-drag.js","names":[],"sources":["../../src/controllers/resize-drag.ts"],"sourcesContent":["/**\n * One pointer drag on a resize handle. The pointer is captured, so the drag keeps\n * working outside the handle, and moves are batched to one `onWidth` call per\n * animation frame (TanStack's `onChange` mode: the width updates while dragging).\n *\n * `direction` is 1 in LTR and -1 in RTL: the handle sits on the inline-end edge,\n * so moving toward the inline end always grows the column.\n */\nexport function startResizeDrag(\n  handle: HTMLElement,\n  down: PointerEvent,\n  startWidth: number,\n  direction: 1 | -1,\n  onWidth: (width: number) => void,\n): void {\n  const startX = down.clientX;\n  let frame = 0;\n  let pending: number | undefined;\n\n  const flush = () => {\n    frame = 0;\n    if (pending !== undefined) onWidth(pending);\n    pending = undefined;\n  };\n  // A press and release without moving (or the clicks of a double-click) changes nothing.\n  let moved = false;\n  const move = (event: PointerEvent) => {\n    moved ||= event.clientX !== startX;\n    if (!moved) return;\n    pending = startWidth + (event.clientX - startX) * direction;\n    frame ||= requestAnimationFrame(flush);\n  };\n  const end = (event: PointerEvent) => {\n    if (event.type === 'pointerup') move(event);\n    if (frame) cancelAnimationFrame(frame);\n    flush();\n    handle.removeAttribute('data-active');\n    handle.removeEventListener('pointermove', move);\n    handle.removeEventListener('pointerup', end);\n    handle.removeEventListener('pointercancel', end);\n    if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);\n  };\n\n  down.preventDefault();\n  try {\n    handle.setPointerCapture(down.pointerId);\n  } catch {\n    // Synthetic or already released pointers can't be captured; moves on the handle still work.\n  }\n  handle.setAttribute('data-active', '');\n  handle.addEventListener('pointermove', move);\n  handle.addEventListener('pointerup', end);\n  handle.addEventListener('pointercancel', end);\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,gBACd,QACA,MACA,YACA,WACA,SACM;CACN,MAAM,SAAS,KAAK;CACpB,IAAI,QAAQ;CACZ,IAAI;CAEJ,MAAM,cAAc;EAClB,QAAQ;EACR,IAAI,YAAY,KAAA,GAAW,QAAQ,OAAO;EAC1C,UAAU,KAAA;CACZ;CAEA,IAAI,QAAQ;CACZ,MAAM,QAAQ,UAAwB;EACpC,UAAU,MAAM,YAAY;EAC5B,IAAI,CAAC,OAAO;EACZ,UAAU,cAAc,MAAM,UAAU,UAAU;EAClD,UAAU,sBAAsB,KAAK;CACvC;CACA,MAAM,OAAO,UAAwB;EACnC,IAAI,MAAM,SAAS,aAAa,KAAK,KAAK;EAC1C,IAAI,OAAO,qBAAqB,KAAK;EACrC,MAAM;EACN,OAAO,gBAAgB,aAAa;EACpC,OAAO,oBAAoB,eAAe,IAAI;EAC9C,OAAO,oBAAoB,aAAa,GAAG;EAC3C,OAAO,oBAAoB,iBAAiB,GAAG;EAC/C,IAAI,OAAO,kBAAkB,MAAM,SAAS,GAAG,OAAO,sBAAsB,MAAM,SAAS;CAC7F;CAEA,KAAK,eAAe;CACpB,IAAI;EACF,OAAO,kBAAkB,KAAK,SAAS;CACzC,QAAQ,CAER;CACA,OAAO,aAAa,eAAe,EAAE;CACrC,OAAO,iBAAiB,eAAe,IAAI;CAC3C,OAAO,iBAAiB,aAAa,GAAG;CACxC,OAAO,iBAAiB,iBAAiB,GAAG;AAC9C"}

package/dist/controllers/table-controller.js

@@ -12,7 +12,8 @@ var TableController = class {
 			data: [],
 			getRowId: void 0,
 			sorting: [],
-			columnSizing: {}
+			columnSizing: {},
+			columnOrder: []
 		});
 	}
 	update(options) {

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

@@ -1 +1 @@
-{"version":3,"file":"table-controller.js","names":[],"sources":["../../src/controllers/table-controller.ts"],"sourcesContent":["import { createTableModel, type TableModel, type TableModelOptions } from '@argus-table/core';\nimport type { CellContent } from '../types.js';\n\n/**\n * Owns the table model (core's TanStack adapter). The element pushes its\n * properties in from `willUpdate`; render functions read `model`. It needs no\n * lifecycle hooks yet: the model is pull-based and owns no state.\n */\nexport class TableController<T> {\n  readonly model: TableModel<T, CellContent>;\n\n  constructor() {\n    this.model = createTableModel<T, CellContent>({\n      columns: [],\n      data: [],\n      getRowId: undefined,\n      sorting: [],\n      columnSizing: {},\n    });\n  }\n\n  update(options: Partial<TableModelOptions<T, CellContent>>): void {\n    this.model.update(options);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,kBAAb,MAAgC;CAG9B,cAAc;EACZ,KAAK,QAAQ,iBAAiC;GAC5C,SAAS,CAAC;GACV,MAAM,CAAC;GACP,UAAU,KAAA;GACV,SAAS,CAAC;GACV,cAAc,CAAC;EACjB,CAAC;CACH;CAEA,OAAO,SAA2D;EAChE,KAAK,MAAM,OAAO,OAAO;CAC3B;AACF"}
+{"version":3,"file":"table-controller.js","names":[],"sources":["../../src/controllers/table-controller.ts"],"sourcesContent":["import { createTableModel, type TableModel, type TableModelOptions } from '@argus-table/core';\nimport type { CellContent } from '../types.js';\n\n/**\n * Owns the table model (core's TanStack adapter). The element pushes its\n * properties in from `willUpdate`; render functions read `model`. It needs no\n * lifecycle hooks yet: the model is pull-based and owns no state.\n */\nexport class TableController<T> {\n  readonly model: TableModel<T, CellContent>;\n\n  constructor() {\n    this.model = createTableModel<T, CellContent>({\n      columns: [],\n      data: [],\n      getRowId: undefined,\n      sorting: [],\n      columnSizing: {},\n      columnOrder: [],\n    });\n  }\n\n  update(options: Partial<TableModelOptions<T, CellContent>>): void {\n    this.model.update(options);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,kBAAb,MAAgC;CAG9B,cAAc;EACZ,KAAK,QAAQ,iBAAiC;GAC5C,SAAS,CAAC;GACV,MAAM,CAAC;GACP,UAAU,KAAA;GACV,SAAS,CAAC;GACV,cAAc,CAAC;GACf,aAAa,CAAC;EAChB,CAAC;CACH;CAEA,OAAO,SAA2D;EAChE,KAAK,MAAM,OAAO,OAAO;CAC3B;AACF"}