argus-table 0.2.2 → 0.4.0

package/dist/column-registry.js

@@ -0,0 +1,23 @@
+// src/column-registry.ts
+/**
+* Elements watching their `<argus-column>` and `<argus-column-group>` children,
+* by element: tables, and groups (which pass it on to their own parent). Columns
+* and groups call their parent's entry when they connect, disconnect or change,
+* so the table needs no MutationObserver on its own children (which would fire on
+* every light-DOM cell render while scrolling).
+*/
+var watchers = /* @__PURE__ */ new WeakMap();
+/** Calls `onChange` whenever a column or group child of `host` is added, removed, moved or changed. */
+function watchColumns(host, onChange) {
+	watchers.set(host, onChange);
+}
+function unwatchColumns(host) {
+	watchers.delete(host);
+}
+/** Tells a column's or group's parent that it changed. */
+function notify(parent) {
+	if (parent) watchers.get(parent)?.();
+}
+export { notify, unwatchColumns, watchColumns };
+
+//# sourceMappingURL=column-registry.js.map

package/dist/column-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-registry.js","names":[],"sources":["../src/column-registry.ts"],"sourcesContent":["/**\n * Elements watching their `<argus-column>` and `<argus-column-group>` children,\n * by element: tables, and groups (which pass it on to their own parent). Columns\n * and groups call their parent's entry when they connect, disconnect or change,\n * so the table needs no MutationObserver on its own children (which would fire on\n * every light-DOM cell render while scrolling).\n */\nconst watchers = new WeakMap<Element, () => void>();\n\n/** Calls `onChange` whenever a column or group child of `host` is added, removed, moved or changed. */\nexport function watchColumns(host: Element, onChange: () => void): void {\n  watchers.set(host, onChange);\n}\n\nexport function unwatchColumns(host: Element): void {\n  watchers.delete(host);\n}\n\n/** Tells a column's or group's parent that it changed. */\nexport function notify(parent: Element | null): void {\n  if (parent) watchers.get(parent)?.();\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,2BAAW,IAAI,QAA6B;;AAGlD,SAAgB,aAAa,MAAe,UAA4B;CACtE,SAAS,IAAI,MAAM,QAAQ;AAC7B;AAEA,SAAgB,eAAe,MAAqB;CAClD,SAAS,OAAO,IAAI;AACtB;;AAGA,SAAgB,OAAO,QAA8B;CACnD,IAAI,QAAQ,SAAS,IAAI,MAAM,CAAC,GAAG;AACrC"}

package/dist/controllers/auto-width.js

@@ -49,14 +49,26 @@ 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 this.#due(columns, true);
+	}
+	/** The auto columns never measured, or measured without loaded rows when there are some now. */
+	#due(columns, hasLoadedRows) {
+		return columns.filter((c) => {
+			if (!c.auto) return false;
+			const state = this.#state.get(c.id);
+			return state === void 0 || state === "provisional" && hasLoadedRows;
+		}).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).
 	*/
 	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;
-		});
+		const due = this.#due(columns, hasLoadedRows);
 		if (due.length === 0) return false;
 		const measured = measureColumns(root, due);
 		const fontsLoading = typeof document !== "undefined" && document.fonts.status === "loading";

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 this.#due(columns, true);\n  }\n\n  /** The auto columns never measured, or measured without loaded rows when there are some now. */\n  #due(columns: readonly { id: string; auto: boolean }[], hasLoadedRows: 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' && hasLoadedRows);\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 = this.#due(columns, hasLoadedRows);\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,QAAQ,SAA6D;EACnE,OAAO,KAAK,KAAK,SAAS,IAAI;CAChC;;CAGA,KAAK,SAAmD,eAAkC;EACxF,OAAO,QACJ,QAAQ,MAAM;GACb,IAAI,CAAC,EAAE,MAAM,OAAO;GACpB,MAAM,QAAQ,KAAK,OAAO,IAAI,EAAE,EAAE;GAClC,OAAO,UAAU,KAAA,KAAc,UAAU,iBAAiB;EAC5D,CAAC,CAAC,CACD,KAAK,MAAM,EAAE,EAAE;CACpB;;;;;CAMA,QACE,MACA,SACA,eACS;EACT,MAAM,MAAM,KAAK,KAAK,SAAS,aAAa;EAC5C,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

@@ -1,13 +1,27 @@
-import { ArgusColumn, unwatchColumns, watchColumns } from "../argus-column.js";
+import { ArgusColumn } from "../argus-column.js";
+import { ArgusColumnGroup } from "../argus-column-group.js";
+import { unwatchColumns, watchColumns } from "../column-registry.js";
 // src/controllers/column-children.ts
+var NO_GROUPS = [];
+/** The `<argus-column>`s among an element's children and in its groups, in document order. */
+function columnsIn(parent) {
+	return [...parent.children].flatMap((c) => {
+		if (c instanceof ArgusColumn) return [c];
+		if (c instanceof ArgusColumnGroup) return columnsIn(c);
+		return [];
+	});
+}
 /**
-* 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.
+* Reads the host's `<argus-column>` children, and those in its
+* `<argus-column-group>` children, into `ColumnDef`s, and the groups into
+* `ColumnGroup`s. Columns and groups tell the host when they change
+* (`watchColumns`); the lists are rebuilt only then, so they keep their identity
+* between changes.
 */
 var ColumnChildrenController = class {
 	#host;
 	#defs = [];
+	#groups = NO_GROUPS;
 	#dirty = true;
 	constructor(host) {
 		this.#host = host;
@@ -27,14 +41,23 @@ var ColumnChildrenController = class {
 	get present() {
 		return this.defs.length > 0;
 	}
-	/** The children's columns, in document order. */
+	/** The children's columns, in document order, those in groups included. */
 	get defs() {
-		if (this.#dirty) {
-			this.#dirty = false;
-			this.#defs = [...this.#host.children].filter((c) => c instanceof ArgusColumn).map((c) => c.toColumnDef());
-		}
+		this.#read();
 		return this.#defs;
 	}
+	/** The `<argus-column-group>` children's groups, in document order. */
+	get groups() {
+		this.#read();
+		return this.#groups;
+	}
+	#read() {
+		if (!this.#dirty) return;
+		this.#dirty = false;
+		this.#defs = columnsIn(this.#host).map((c) => c.toColumnDef());
+		const groups = [...this.#host.children].filter((c) => c instanceof ArgusColumnGroup).map((c) => c.toColumnGroup());
+		this.#groups = groups.length ? groups : NO_GROUPS;
+	}
 };
 export { ColumnChildrenController };
 

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

@@ -1 +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"}
+{"version":3,"file":"column-children.js","names":[],"sources":["../../src/controllers/column-children.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { ArgusColumn } from '../argus-column.js';\nimport { ArgusColumnGroup } from '../argus-column-group.js';\nimport { unwatchColumns, watchColumns } from '../column-registry.js';\nimport type { ColumnDef, ColumnGroup } from '../types.js';\n\nconst NO_GROUPS: readonly ColumnGroup[] = [];\n\n/** The `<argus-column>`s among an element's children and in its groups, in document order. */\nfunction columnsIn<T>(parent: Element): ArgusColumn<T>[] {\n  return [...parent.children].flatMap((c) => {\n    if (c instanceof ArgusColumn) return [c as ArgusColumn<T>];\n    if (c instanceof ArgusColumnGroup) return columnsIn<T>(c);\n    return [];\n  });\n}\n\n/**\n * Reads the host's `<argus-column>` children, and those in its\n * `<argus-column-group>` children, into `ColumnDef`s, and the groups into\n * `ColumnGroup`s. Columns and groups tell the host when they change\n * (`watchColumns`); the lists are rebuilt only then, so they keep their identity\n * between changes.\n */\nexport class ColumnChildrenController<T> implements ReactiveController {\n  readonly #host: ReactiveControllerHost & HTMLElement;\n  #defs: readonly ColumnDef<T>[] = [];\n  #groups: readonly ColumnGroup[] = NO_GROUPS;\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, those in groups included. */\n  get defs(): readonly ColumnDef<T>[] {\n    this.#read();\n    return this.#defs;\n  }\n\n  /** The `<argus-column-group>` children's groups, in document order. */\n  get groups(): readonly ColumnGroup[] {\n    this.#read();\n    return this.#groups;\n  }\n\n  #read(): void {\n    if (!this.#dirty) return;\n    this.#dirty = false;\n    this.#defs = columnsIn<T>(this.#host).map((c) => c.toColumnDef());\n    const groups = [...this.#host.children]\n      .filter((c): c is ArgusColumnGroup => c instanceof ArgusColumnGroup)\n      .map((c) => c.toColumnGroup());\n    this.#groups = groups.length ? groups : NO_GROUPS;\n  }\n}\n"],"mappings":";;;;AAMA,IAAM,YAAoC,CAAC;;AAG3C,SAAS,UAAa,QAAmC;CACvD,OAAO,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,SAAS,MAAM;EACzC,IAAI,aAAa,aAAa,OAAO,CAAC,CAAmB;EACzD,IAAI,aAAa,kBAAkB,OAAO,UAAa,CAAC;EACxD,OAAO,CAAC;CACV,CAAC;AACH;;;;;;;;AASA,IAAa,2BAAb,MAAuE;CACrE;CACA,QAAiC,CAAC;CAClC,UAAkC;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,KAAK,MAAM;EACX,OAAO,KAAK;CACd;;CAGA,IAAI,SAAiC;EACnC,KAAK,MAAM;EACX,OAAO,KAAK;CACd;CAEA,QAAc;EACZ,IAAI,CAAC,KAAK,QAAQ;EAClB,KAAK,SAAS;EACd,KAAK,QAAQ,UAAa,KAAK,KAAK,CAAC,CAAC,KAAK,MAAM,EAAE,YAAY,CAAC;EAChE,MAAM,SAAS,CAAC,GAAG,KAAK,MAAM,QAAQ,CAAC,CACpC,QAAQ,MAA6B,aAAa,gBAAgB,CAAC,CACnE,KAAK,MAAM,EAAE,cAAc,CAAC;EAC/B,KAAK,UAAU,OAAO,SAAS,SAAS;CAC1C;AACF"}

package/dist/controllers/column-window.js

@@ -0,0 +1,135 @@
+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;
+	}
+	/**
+	* 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  /**\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,121 @@
+// 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;
+	#groupsMemo;
+	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);
+	}
+	/** Tells the plugins, in order, which properties changed; before the transforms. */
+	willUpdate(changed) {
+		for (const plugin of this.#plugins) {
+			if (!plugin.willUpdate || this.#failed.has(plugin)) continue;
+			this.#guard(plugin, "willUpdate", () => {
+				plugin.willUpdate?.(changed, this.#api);
+			});
+		}
+	}
+	/** The plugins' `columns` transforms applied in order; the same array while nothing changed. */
+	transform(input) {
+		const memo = this.#run("columns", input, this.#memo, (plugin, defs) => plugin.columns?.(defs, this.#api));
+		this.#memo = memo;
+		return memo.output;
+	}
+	/** The plugins' `columnGroups` transforms applied in order; the same array while nothing changed. */
+	transformGroups(input) {
+		const memo = this.#run("columnGroups", input, this.#groupsMemo, (plugin, groups) => plugin.columnGroups?.(groups, this.#api));
+		this.#groupsMemo = memo;
+		return memo.output;
+	}
+	#run(hook, input, memo, apply) {
+		if (memo?.input === input && memo.plugins === this.#plugins && memo.version === this.#version) return memo;
+		let output = input;
+		for (const plugin of this.#plugins) {
+			if (!plugin[hook] || this.#failed.has(plugin)) continue;
+			const before = output;
+			const result = this.#guard(plugin, hook, () => apply(plugin, before));
+			if (result.ok && result.value) output = result.value;
+		}
+		if (memo && sameItems(memo.output, output)) output = memo.output;
+		return {
+			input,
+			plugins: this.#plugins,
+			version: this.#version,
+			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, ColumnGroup } from '../types.js';\n\ntype Hook = 'connect' | 'cleanup' | 'willUpdate' | 'columns' | 'columnGroups' | 'keydown';\n\ninterface Memo<V> {\n  input: readonly V[];\n  plugins: readonly unknown[];\n  version: number;\n  output: readonly V[];\n}\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: Memo<ColumnDef<T, unknown>> | undefined;\n  #groupsMemo: Memo<ColumnGroup<unknown>> | 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  /** Tells the plugins, in order, which properties changed; before the transforms. */\n  willUpdate(changed: ReadonlySet<string>): void {\n    for (const plugin of this.#plugins) {\n      if (!plugin.willUpdate || this.#failed.has(plugin)) continue;\n      this.#guard(plugin, 'willUpdate', () => {\n        plugin.willUpdate?.(changed, this.#api);\n      });\n    }\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.#run('columns', input, this.#memo, (plugin, defs) =>\n      plugin.columns?.(defs, this.#api),\n    );\n    this.#memo = memo;\n    // Plugins see content as `unknown`; what they return renders through the\n    // `content()` directive, which hands anything else to the `contentRenderer`.\n    return memo.output as readonly ColumnDef<T>[];\n  }\n\n  /** The plugins' `columnGroups` transforms applied in order; the same array while nothing changed. */\n  transformGroups(input: readonly ColumnGroup[]): readonly ColumnGroup[] {\n    const memo = this.#run('columnGroups', input, this.#groupsMemo, (plugin, groups) =>\n      plugin.columnGroups?.(groups, this.#api),\n    );\n    this.#groupsMemo = memo;\n    return memo.output as readonly ColumnGroup[];\n  }\n\n  #run<V>(\n    hook: 'columns' | 'columnGroups',\n    input: readonly V[],\n    memo: Memo<V> | undefined,\n    apply: (plugin: ArgusPlugin<T>, items: readonly V[]) => readonly V[] | undefined,\n  ): Memo<V> {\n    if (memo?.input === input && memo.plugins === this.#plugins && memo.version === this.#version) {\n      return memo;\n    }\n    let output = input;\n    for (const plugin of this.#plugins) {\n      if (!plugin[hook] || this.#failed.has(plugin)) continue;\n      const before = output;\n      const result = this.#guard(plugin, hook, () => apply(plugin, before));\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    return { input, plugins: this.#plugins, version: this.#version, 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,27 +1,30 @@
+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];
-	return at ? {
+	if (!dragged || !last) return void 0;
+	const at = slots.find((s) => (x - (s.rect.left + s.rect.right) / 2) * direction < 0);
+	if (!at) {
+		const to = last.index >= dragged.index ? last.index : last.index + 1;
+		return to === dragged.index ? void 0 : {
+			to,
+			id: last.id,
+			edge: "end"
+		};
+	}
+	const to = at.index > dragged.index ? at.index - 1 : at.index;
+	return to === dragged.index ? void 0 : {
 		to,
-		columnId: at.id,
+		id: at.id,
 		edge: "start"
-	} : {
-		to,
-		columnId: last.id,
-		edge: "end"
 	};
 }
 /** Movement before a press becomes a drag, so a click still sorts. */
@@ -29,7 +32,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 +43,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;
 }
@@ -60,7 +62,7 @@ function startReorderDrag(cell, down, options) {
 	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 same = (a, b) => a?.to === b?.to && a?.id === b?.id && a?.edge === b?.edge;
 	const tick = () => {
 		frame = 0;
 		if (!dragging) return;