@iyulab/flex-table 0.56.0 → 0.56.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [0.56.1] - 2026-10-07
+
+### Fixed
+
+- **An edit is written to the row it was started on.** The open editor remembered a screen position and the commit
+  wrote whatever row stood there, so a refresh that put a row above the one being edited (or a sort while editing)
+  sent the typed value into another row. The editor now follows its row — drawn again in the row's new place with
+  what was typed and the focus — and an edit whose row left `data` (or a filter hid) is cancelled.
+- **Undo and redo write the rows they changed** (cell edits, `updateRows`, paste, clear, fill, replace). They wrote
+  `data` positions, so after `data` changed in between they changed other rows.
+- **Comments stay on their rows.** They were kept by `data` index, so inserting or deleting a row moved every comment
+  below it onto the neighbouring row. A deleted row's comments leave with it (and come back on undo).
+- **Validation marks stay on their cells** when the view reorders while one is shown.
+- `cell-edit-cancel` reports `row` as the data index, like the other edit events (it was the screen position) —
+  `-1` when the row is no longer in `data`.
+
+### Added
+
+- `comment-change` and `getAllComments()` carry the row's `id`.
+
 ## [0.56.0] - 2026-10-07
 
 ### Fixed

package/README.md

@@ -306,7 +306,7 @@ type-checks without a cast. The React wrapper's `on*` props carry the same types
 | `cell-select` | `{ row, col }` or `null` | Cell focus changed (`null` when no cell is active) |
 | `cell-edit-start` | `{ row, col, key, value }` | Cell editing started |
 | `cell-edit-commit` | `{ row, col, key, oldValue, newValue }` | Cell value committed |
-| `cell-edit-cancel` | `{ row, col }` | Cell edit cancelled (Escape) |
+| `cell-edit-cancel` | `{ row, col }` | Cell edit cancelled (Escape, or its row left `data`). `row` is the data index (`-1` once the row is gone) |
 | `validation-error` | `{ row, col, key, value, error }` | Cell validator rejected value, or a `number` cell got text that is not a number |
 
 ### Data Events
@@ -321,7 +321,7 @@ type-checks without a cast. The React wrapper's `on*` props carry the same types
 | `data-import` | `{ count }` | Rows imported from a file |
 | `fill-handle-apply` | `{ sourceRange, targetRange, cells }` | Fill handle wrote `cells` (`{ dataRow, key, oldValue, newValue }`) |
 | `find-replace` | `{ type, cells }` | Replace (`type: 'replace'`) or replace-all from the find panel; `cells` are `{ row, col, oldValue, newValue }` with `col` the column key |
-| `comment-change` | `{ dataIndex, colKey, text }` | Cell comment set, changed or removed (`text: null`) |
+| `comment-change` | `{ dataIndex, id, colKey, text }` | Cell comment set, changed or removed (`text: null`). Comments stay on their rows (`id`) when rows move |
 
 ### Column Events
 

package/dist/core/editing.d.ts

@@ -1,14 +1,20 @@
 import type { CellPosition } from './selection.js';
+import type { DataRow } from '../models/types.js';
 export interface EditState {
+    /** Where the editor is drawn — the visual cell. The grid moves it when the view moves the row. */
     position: CellPosition;
     originalValue: unknown;
+    /** The row being edited — the commit writes it, wherever `data` has moved it. */
+    row: DataRow;
+    /** What the editor held when the row moved and the editor was drawn again — handed to the new one. */
+    draft?: unknown;
 }
 /**
  * Manages cell editing state.
  */
 export declare class EditingState {
     current: EditState | null;
-    start(position: CellPosition, originalValue: unknown): void;
+    start(position: CellPosition, originalValue: unknown, row: DataRow): void;
     isEditing(row: number, col: number): boolean;
     cancel(): EditState | null;
     commit(): EditState | null;

package/dist/events.d.ts

@@ -126,8 +126,10 @@ export interface FlexTableEventMap {
         value: unknown;
         error: string;
     }>;
+    /** `id` — the row's id (comments stay on their rows); `dataIndex` — its position in `data` now (-1 when not loaded). */
     'comment-change': CustomEvent<{
         dataIndex: number;
+        id: string;
         colKey: string;
         text: string | null;
     }>;

package/dist/{flex-table-M_oC8OXD.js → flex-table-DKBcfNA4.js}

@@ -1059,25 +1059,25 @@ function E(e, t) {
 //#endregion
 //#region src/renderers/cell-renderer.ts
 function D(e, t, n) {
-	return n.render ? n.render(e, t, n) : n.format ? typeof n.format == "function" ? n.format(e, t, n) : C(e, n.format) : O(e, n);
+	return n.render ? n.render(e, t, n) : n.format ? typeof n.format == "function" ? n.format(e, t, n) : C(e, n.format) : ee(e, n);
 }
-function O(e, t) {
+function ee(e, t) {
 	if (e == null) return "";
 	switch (t.type) {
-		case "number": return ne(e);
+		case "number": return re(e);
 		case "boolean": return a`<span class="ft-bool">${e ? "✔" : ""}</span>`;
-		case "date": return re(e);
-		case "datetime": return ie(e);
-		case "select": return ee(e, t);
+		case "date": return ie(e);
+		case "datetime": return ae(e);
+		case "select": return te(e, t);
 		default: return String(e);
 	}
 }
-function ee(e, t) {
+function te(e, t) {
 	if (!t.options || t.options.length === 0 || typeof t.options[0] == "string") return e == null ? "" : String(e);
 	let n = t.options.find((t) => t.value === e);
 	return n ? n.label : e == null ? "" : String(e);
 }
-var te = {
+var ne = {
 	year: "numeric",
 	month: "numeric",
 	day: "numeric",
@@ -1085,18 +1085,18 @@ var te = {
 	minute: "numeric",
 	second: "numeric"
 };
-function ne(e) {
+function re(e) {
 	return typeof e == "number" ? Number.isInteger(e) ? f(e) : f(e, { minimumFractionDigits: 1 }) : String(e);
 }
-function re(e) {
+function ie(e) {
 	return e instanceof Date || typeof e == "string" ? d(e) : String(e);
 }
-function ie(e) {
-	return e instanceof Date || typeof e == "string" ? d(e, te) : String(e);
+function ae(e) {
+	return e instanceof Date || typeof e == "string" ? d(e, ne) : String(e);
 }
 //#endregion
 //#region src/core/selection.ts
-function ae(e) {
+function oe(e) {
 	return {
 		startRow: Math.min(e.startRow, e.endRow),
 		startCol: Math.min(e.startCol, e.endCol),
@@ -1104,7 +1104,7 @@ function ae(e) {
 		endCol: Math.max(e.startCol, e.endCol)
 	};
 }
-var oe = class {
+var se = class {
 	constructor() {
 		this.activeCell = null, this.rangeAnchor = null, this.range = null, this.extraRanges = [], this._rowCount = 0, this._colCount = 0;
 	}
@@ -1131,7 +1131,7 @@ var oe = class {
 		return e < 0 || e >= this._rowCount || t < 0 || t >= this._colCount ? this.activeCell : (!this.rangeAnchor && this.activeCell && (this.rangeAnchor = { ...this.activeCell }), this.activeCell = {
 			row: e,
 			col: t
-		}, this.rangeAnchor && (this.range = ae({
+		}, this.rangeAnchor && (this.range = oe({
 			startRow: this.rangeAnchor.row,
 			startCol: this.rangeAnchor.col,
 			endRow: e,
@@ -1202,14 +1202,15 @@ var oe = class {
 	shiftMoveRight() {
 		return this.activeCell ? this.setActiveWithRange(this.activeCell.row, this.activeCell.col + 1) : null;
 	}
-}, se = class {
+}, ce = class {
 	constructor() {
 		this.current = null;
 	}
-	start(e, t) {
+	start(e, t, n) {
 		this.current = {
 			position: e,
-			originalValue: t
+			originalValue: t,
+			row: n
 		};
 	}
 	isEditing(e, t) {
@@ -1223,7 +1224,7 @@ var oe = class {
 		let e = this.current;
 		return this.current = null, e;
 	}
-}, k = class {
+}, O = class {
 	constructor() {
 		this._selected = /* @__PURE__ */ new Set(), this._mode = "multi";
 	}
@@ -1290,7 +1291,7 @@ var oe = class {
 };
 //#endregion
 //#region src/core/filtering.ts
-function ce(e, t, n) {
+function k(e, t, n) {
 	if (t.length === 0) return Array.from({ length: e.length }, (e, t) => t);
 	let r = [];
 	for (let i = 0; i < e.length; i++) {
@@ -1762,7 +1763,9 @@ var K = {
 	lte: "≤"
 }, q = 120, J = 40, Y = 20, X = 32, Z = 5, Xe = 200, Q = class extends r {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this.rowKey = "_id", this._rowHeightFromCss = X, this._targetFloor = 0, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "", this.noMatchingMessage = "", this.error = null, this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._headerCol = null, this._focusedCellEl = null, this._editingCell = null, this._sortCriteria = [], this._selection = new oe(), this._editing = new se(), this._rowSelection = new k(), this._undo = new A(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowId = null, this._unkeyedIds = /* @__PURE__ */ new WeakMap(), this._unkeyedSeq = 0, this._visibleIdsCache = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._wasHeaderDrag = !1, this._wasRowDrag = !1, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._warnedUnconstrained = !1, this._onHostFocus = (e) => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this.rowKey = "_id", this._rowHeightFromCss = X, this._targetFloor = 0, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "", this.noMatchingMessage = "", this.error = null, this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._headerCol = null, this._focusedCellEl = null, this._editingCell = null, this._sortCriteria = [], this._selection = new se(), this._editing = new ce(), this._rowSelection = new O(), this._undo = new A(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowId = null, this._unkeyedIds = /* @__PURE__ */ new WeakMap(), this._unkeyedSeq = 0, this._visibleIdsCache = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._wasHeaderDrag = !1, this._wasRowDrag = !1, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._editorMoving = !1, this._onEditorBlur = (e) => {
+			!this._editorMoving && e.currentTarget?.isConnected && this._commitEdit();
+		}, this._warnedUnconstrained = !1, this._onHostFocus = (e) => {
 			e.composedPath()[0] !== this || this._activeCell || this._headerCol !== null || this.visibleColumns.length !== 0 && this.matches(":focus-visible") && (this._visibleRowCount > 0 ? (this._selection.setActive(0, 0), this._syncActiveCell()) : this._headerCol = 0);
 		}, this._onFocusIn = (e) => {
 			let t = e.composedPath()[0];
@@ -1790,7 +1793,7 @@ var K = {
 	}
 	set data(e) {
 		let t = this._data, n = e !== t;
-		this._data = e, n && !this._inUndoRedo && (this.clearUndoOnDataChange && this._undo.clear(), this._rowSelection.selectedCount > 0 && (this.clearSelectionOnDataChange ? (this._rowSelection.deselectAll(), 1) : this._pruneGoneUnkeyedRows()) && (this._rowSelectionVersion++, this._dispatchRowSelectionEvent())), this.requestUpdate("data", t);
+		this._data = e, n && !this._inUndoRedo && (this.clearUndoOnDataChange && this._undo.clear(), this._comments.size > 0 && this._pruneGoneUnkeyedComments(), this._rowSelection.selectedCount > 0 && (this.clearSelectionOnDataChange ? (this._rowSelection.deselectAll(), 1) : this._pruneGoneUnkeyedRows()) && (this._rowSelectionVersion++, this._dispatchRowSelectionEvent())), this.requestUpdate("data", t);
 	}
 	get rowHeight() {
 		let e = this._rowHeightExplicit ?? this._rowHeightFromCss ?? X;
@@ -1894,6 +1897,11 @@ var K = {
 			ids: t
 		}, t;
 	}
+	_pruneGoneUnkeyedComments() {
+		if (![...this._comments.keys()].some((e) => e.startsWith("#"))) return;
+		let e = new Set(this.data.map((e) => this.getRowId(e)));
+		for (let t of [...this._comments.keys()]) t.startsWith("#") && !e.has(t) && this._comments.delete(t);
+	}
 	_pruneGoneUnkeyedRows() {
 		if (!this._rowSelection.selectedIds.some((e) => e.startsWith("#"))) return !1;
 		let e = new Set(this.data.map((e) => this.getRowId(e)));
@@ -2081,20 +2089,28 @@ var K = {
 			row: this.data[e]
 		}), this.data.splice(e, 1));
 		if (r.length === 0) return;
-		r.reverse(), this._undo.push({
+		r.reverse();
+		let i = /* @__PURE__ */ new Map();
+		for (let { row: e } of r) {
+			let t = this.getRowId(e), n = this._comments.get(t);
+			n && (i.set(t, n), this._comments.delete(t));
+		}
+		this._undo.push({
 			label: "row-delete",
 			undo: () => {
 				for (let { index: e, row: t } of r) this.data.splice(e, 0, t);
+				for (let [e, t] of i) this._comments.set(e, t);
 				this.requestUpdate();
 			},
 			redo: () => {
 				let e = [...r].reverse();
 				for (let { index: t } of e) this.data.splice(t, 1);
+				for (let e of i.keys()) this._comments.delete(e);
 				this.requestUpdate();
 			}
 		});
-		let i = r.map((e) => this.getRowId(e.row)).filter((e) => this._rowSelection.isSelected(e));
-		if (i.length > 0 && (this._rowSelection.deselectMany(i), this._rowSelectionVersion++, this._dispatchRowSelectionEvent()), this._activeCell) {
+		let a = r.map((e) => this.getRowId(e.row)).filter((e) => this._rowSelection.isSelected(e));
+		if (a.length > 0 && (this._rowSelection.deselectMany(a), this._rowSelectionVersion++, this._dispatchRowSelectionEvent()), this._activeCell) {
 			let e = this._toDataIndex(this._activeCell.row);
 			t.includes(e) && (this._selection.clear(), this._activeCell = null);
 		}
@@ -2105,26 +2121,28 @@ var K = {
 	}
 	updateRows(e) {
 		if (e.length === 0) return;
-		let t = [];
-		for (let n of e) {
-			if (n.row < 0 || n.row >= this.data.length) continue;
-			let e = this.data[n.row][n.key];
-			this.data[n.row][n.key] = n.value, t.push({
-				row: n.row,
-				key: n.key,
+		let t = [], n = [];
+		for (let r of e) {
+			if (r.row < 0 || r.row >= this.data.length) continue;
+			let e = this.data[r.row][r.key];
+			this.data[r.row][r.key] = r.value, t.push({
+				row: r.row,
+				key: r.key,
 				oldValue: e,
-				newValue: n.value
-			});
+				newValue: r.value
+			}), n.push(this.data[r.row]);
 		}
 		t.length !== 0 && (this._undo.push({
 			label: "batch-update",
 			undo: () => {
-				for (let e of t) this.data[e.row][e.key] = e.oldValue;
-				this.requestUpdate();
+				t.forEach((e, t) => {
+					n[t][e.key] = e.oldValue;
+				}), this.requestUpdate();
 			},
 			redo: () => {
-				for (let e of t) this.data[e.row][e.key] = e.newValue;
-				this.requestUpdate();
+				t.forEach((e, t) => {
+					n[t][e.key] = e.newValue;
+				}), this.requestUpdate();
 			}
 		}), this.requestUpdate(), this._emit("batch-update", { changes: t }), this._dispatchUndoStateEvent());
 	}
@@ -2172,14 +2190,16 @@ var K = {
 		};
 	}
 	setComment(e, t, n) {
-		let r = this.getComment(e, t);
-		this._applyComment(e, t, n), this._undo.push({
+		let r = this.data[e];
+		if (!r) return;
+		let i = this.getRowId(r), a = this._comments.get(i)?.get(t) ?? null;
+		this._applyComment(i, t, n), this._undo.push({
 			label: "comment",
 			undo: () => {
-				this._applyComment(e, t, r);
+				this._applyComment(i, t, a);
 			},
 			redo: () => {
-				this._applyComment(e, t, n);
+				this._applyComment(i, t, n);
 			}
 		});
 	}
@@ -2189,23 +2209,29 @@ var K = {
 			let n = this._comments.get(e);
 			n && (n.delete(t), n.size === 0 && this._comments.delete(e));
 		}
+		let r = this.data.findIndex((t) => this.getRowId(t) === e);
 		this._emit("comment-change", {
-			dataIndex: e,
+			dataIndex: r,
+			id: e,
 			colKey: t,
 			text: n ?? null
 		}), this.requestUpdate();
 	}
 	getComment(e, t) {
-		return this._comments.get(e)?.get(t) ?? null;
+		let n = this.data[e];
+		return n ? this._comments.get(this.getRowId(n))?.get(t) ?? null : null;
 	}
 	getAllComments() {
 		let e = [];
-		for (let [t, n] of this._comments) for (let [r, i] of n) e.push({
-			dataIndex: t,
-			colKey: r,
-			text: i
-		});
-		return e;
+		return this._comments.size === 0 || this.data.forEach((t, n) => {
+			let r = this.getRowId(t);
+			for (let [t, i] of this._comments.get(r) ?? []) e.push({
+				dataIndex: n,
+				id: r,
+				colKey: t,
+				text: i
+			});
+		}), e;
 	}
 	clearComments() {
 		let e = new Map([...this._comments].map(([e, t]) => [e, new Map(t)]));
@@ -2391,10 +2417,10 @@ var K = {
 		};
 	}
 	willUpdate(e) {
-		(!(e.size <= 2 && !e.has("data") && !e.has("columns") && !e.has("_openFilterKey") && !e.has("_editingCell") && !e.has("_activeCell") && (e.has("_scrollTop") || e.has("_scrollLeft"))) || this._viewDirty) && (this._recomputeView(), this._viewDirty = !1), this._updateColOffsets(), this._selection.setDimensions(this._visibleRowCount, this.visibleColumns.length);
+		(!(e.size <= 2 && !e.has("data") && !e.has("columns") && !e.has("_openFilterKey") && !e.has("_editingCell") && !e.has("_activeCell") && (e.has("_scrollTop") || e.has("_scrollLeft"))) || this._viewDirty) && (this._recomputeView(), this._viewDirty = !1, this._followEditingRow()), this._updateColOffsets(), this._selection.setDimensions(this._visibleRowCount, this.visibleColumns.length);
 	}
 	updated(e) {
-		this._focusEditor(), this._syncGridFocus(), this._adjustFilterDropdown(), e.has("_headerMenu") && this._keepMenuInView(".ft-header-menu"), e.has("_bodyContextMenu") && this._bodyContextMenu && (this._keepMenuInView(".ft-body-context-menu"), this.shadowRoot?.querySelector(".ft-body-context-menu [role=\"menuitem\"]")?.focus()), e.has("stylesheets") && this._syncStylesheets();
+		this._focusEditor(), this._editorMoving = !1, this._syncGridFocus(), this._adjustFilterDropdown(), e.has("_headerMenu") && this._keepMenuInView(".ft-header-menu"), e.has("_bodyContextMenu") && this._bodyContextMenu && (this._keepMenuInView(".ft-body-context-menu"), this.shadowRoot?.querySelector(".ft-body-context-menu [role=\"menuitem\"]")?.focus()), e.has("stylesheets") && this._syncStylesheets();
 		let t = String(1 + this._visibleRowCount + +!!this.footerData), n = String(this.visibleColumns.length);
 		if (this.getAttribute("aria-rowcount") !== t && this.setAttribute("aria-rowcount", t), this.getAttribute("aria-colcount") !== n && this.setAttribute("aria-colcount", n), this.loading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), e.has("_commentPopup") && this._commentPopup) {
 			let e = this.shadowRoot?.querySelector(".ft-comment-popup textarea");
@@ -2406,7 +2432,7 @@ var K = {
 			this._filteredIndices = Array.from({ length: this.data.length }, (e, t) => t), this._sortedIndices = this._filteredIndices;
 			return;
 		}
-		if (this._filteredIndices = ce(this.data, this._filters, (e, t, n) => {
+		if (this._filteredIndices = k(this.data, this._filters, (e, t, n) => {
 			this._emit("filter-error", {
 				error: e,
 				row: t,
@@ -2419,12 +2445,32 @@ var K = {
 			this._sortedIndices = t.map((e) => this._filteredIndices[e]);
 		}
 	}
+	_followEditingRow() {
+		let e = this._editing.current;
+		if (!e) return;
+		let t = this.data.indexOf(e.row), n = t < 0 ? -1 : this._sortedIndices.indexOf(t);
+		if (n < 0) {
+			this._cancelEdit();
+			return;
+		}
+		if (n === e.position.row) return;
+		let r = this.shadowRoot?.querySelector(".ft-editor");
+		r && "value" in r && (e.draft = r.value), this._editorMoving = !0, e.position = {
+			row: n,
+			col: e.position.col
+		}, this._editingCell = { ...e.position }, this._activeCell = this._selection.setActive(n, e.position.col);
+	}
 	_toDataIndex(e) {
 		return this._sortedIndices[e] ?? e;
 	}
 	_focusEditor() {
 		if (!this._editingCell) return;
-		let e = this.shadowRoot?.querySelector(".ft-editor");
+		let e = this.shadowRoot?.querySelector(".ft-editor"), t = this._editing.current;
+		if (e && t?.draft !== void 0) {
+			let n = t.draft;
+			t.draft = void 0, e.value = n, e.focus(), e.type === "text" && e.setSelectionRange(e.value.length, e.value.length);
+			return;
+		}
 		if (e && this.shadowRoot.activeElement !== e) {
 			if (e.localName === "u-date-picker") {
 				let t = e;
@@ -2545,7 +2591,7 @@ var K = {
 			return;
 		}
 		let t = this._toDataIndex(this._activeCell.row), n = this.data[t];
-		this._editing.start(this._activeCell, n[e.key]), this._editingCell = { ...this._activeCell }, this._emit("cell-edit-start", {
+		this._editing.start(this._activeCell, n[e.key], n), this._editingCell = { ...this._activeCell }, this._emit("cell-edit-start", {
 			row: t,
 			col: this._activeCell.col,
 			key: e.key,
@@ -2588,12 +2634,20 @@ var K = {
 		this._autocompleteState = null;
 		let n = this._editing.commit();
 		if (this._editingCell = null, !n) return;
-		let { row: r, col: i } = n.position, a = this._toDataIndex(r), o = this.visibleColumns[i], s = n.originalValue;
+		let { col: r } = n.position, i = n.row, a = this.data.indexOf(i);
+		if (a < 0) {
+			this._emit("cell-edit-cancel", {
+				row: -1,
+				col: r
+			});
+			return;
+		}
+		let o = this.visibleColumns[r], s = n.originalValue;
 		if (o.autocomplete === "strict" && t != null && t !== "" && !this._getAutocompleteCandidates(o, "").includes(String(t))) {
 			let n = e("notInList");
-			this._markCellInvalid(r, i, () => e("notInList")), this._emit("validation-error", {
+			this._markCellInvalid(i, o, () => e("notInList")), this._emit("validation-error", {
 				row: a,
-				col: i,
+				col: r,
 				key: o.key,
 				value: t,
 				error: n
@@ -2602,9 +2656,9 @@ var K = {
 		}
 		if (o.type === "number" && typeof t == "string" || o.type === "date" && typeof t == "string" && p(t) === null || o.type === "datetime" && typeof t == "string" && m(t) === null) {
 			let n = o.type === "number" ? "notANumber" : o.type === "date" ? "notADate" : "notADateTime", s = e(n);
-			this._markCellInvalid(r, i, () => e(n)), this._emit("validation-error", {
+			this._markCellInvalid(i, o, () => e(n)), this._emit("validation-error", {
 				row: a,
-				col: i,
+				col: r,
 				key: o.key,
 				value: t,
 				error: s
@@ -2612,11 +2666,11 @@ var K = {
 			return;
 		}
 		if (o.validator) {
-			let e = o.validator(t, this.data[a], o);
+			let e = o.validator(t, i, o);
 			if (e) {
-				this._markCellInvalid(r, i, e), this._emit("validation-error", {
+				this._markCellInvalid(i, o, e), this._emit("validation-error", {
 					row: a,
-					col: i,
+					col: r,
 					key: o.key,
 					value: t,
 					error: e
@@ -2624,17 +2678,17 @@ var K = {
 				return;
 			}
 		}
-		this.data[a][o.key] = t, this._undo.push({
+		i[o.key] = t, this._undo.push({
 			label: "cell-edit",
 			undo: () => {
-				this.data[a][o.key] = s, this.requestUpdate();
+				i[o.key] = s, this.requestUpdate();
 			},
 			redo: () => {
-				this.data[a][o.key] = t, this.requestUpdate();
+				i[o.key] = t, this.requestUpdate();
 			}
 		}), this.requestUpdate(), this._emit("cell-edit-commit", {
 			row: a,
-			col: i,
+			col: r,
 			key: o.key,
 			oldValue: s,
 			newValue: t
@@ -2644,7 +2698,7 @@ var K = {
 		this._autocompleteState = null;
 		let e = this._editing.cancel();
 		this._editingCell = null, e && this._emit("cell-edit-cancel", {
-			row: e.position.row,
+			row: this.data.indexOf(e.row),
 			col: e.position.col
 		});
 	}
@@ -2929,17 +2983,24 @@ var K = {
 		if (t.length === 0) return;
 		let n = this._expandRowsForPaste(this._activeCell.row, t.length), r = this._applyPasteData(this._activeCell, t);
 		if (this._selectPastedRange(this._activeCell, t), r.length > 0 || n.length > 0) {
-			let e = n.length;
+			let e = r.map((e) => this.data[e.row]), t = n.map((e) => this.data[e]);
 			this._undo.push({
 				label: "paste",
 				undo: () => {
-					for (let e of r) this.data[e.row][e.key] = e.oldValue;
-					e > 0 && this.data.splice(this.data.length - e, e), this.requestUpdate();
+					r.forEach((t, n) => {
+						e[n][t.key] = t.oldValue;
+					});
+					for (let e of t) {
+						let t = this.data.indexOf(e);
+						t >= 0 && this.data.splice(t, 1);
+					}
+					this.requestUpdate();
 				},
 				redo: () => {
-					if (e > 0) for (let t = 0; t < e; t++) this.data.push(this._createEmptyRow());
-					for (let e of r) this.data[e.row][e.key] = e.newValue;
-					this.requestUpdate();
+					for (let e of t) this.data.push(e);
+					r.forEach((t, n) => {
+						e[n][t.key] = t.newValue;
+					}), this.requestUpdate();
 				}
 			}), this._dispatchUndoStateEvent();
 		}
@@ -3063,7 +3124,7 @@ var K = {
 				r.add(i);
 				let o = t[e], s = this.data[a][o.key], c = o.type === "boolean" ? !1 : o.type === "number" ? 0 : "";
 				this.data[a][o.key] = c, n.push({
-					dataRow: a,
+					target: this.data[a],
 					key: o.key,
 					oldValue: s,
 					clearValue: c
@@ -3073,11 +3134,11 @@ var K = {
 		n.length > 0 && (this._undo.push({
 			label: "clear",
 			undo: () => {
-				for (let e of n) this.data[e.dataRow][e.key] = e.oldValue;
+				for (let e of n) e.target[e.key] = e.oldValue;
 				this.requestUpdate();
 			},
 			redo: () => {
-				for (let e of n) this.data[e.dataRow][e.key] = e.clearValue;
+				for (let e of n) e.target[e.key] = e.clearValue;
 				this.requestUpdate();
 			}
 		}), this._dispatchUndoStateEvent()), this.requestUpdate();
@@ -3089,7 +3150,7 @@ var K = {
 			for (let r = e.startCol; r <= e.endCol; r++) {
 				let e = t[r], a = this.data[i][e.key], o = e.type === "boolean" ? !1 : e.type === "number" ? 0 : "";
 				this.data[i][e.key] = o, n.push({
-					dataRow: i,
+					target: this.data[i],
 					key: e.key,
 					oldValue: a,
 					clearValue: o
@@ -3099,11 +3160,11 @@ var K = {
 		n.length > 0 && (this._undo.push({
 			label: "clear",
 			undo: () => {
-				for (let e of n) this.data[e.dataRow][e.key] = e.oldValue;
+				for (let e of n) e.target[e.key] = e.oldValue;
 				this.requestUpdate();
 			},
 			redo: () => {
-				for (let e of n) this.data[e.dataRow][e.key] = e.clearValue;
+				for (let e of n) e.target[e.key] = e.clearValue;
 				this.requestUpdate();
 			}
 		}), this._dispatchUndoStateEvent()), this.requestUpdate();
@@ -3696,7 +3757,7 @@ var K = {
     `;
 	}
 	_cellKey(e, t) {
-		return `${e}:${t}`;
+		return `${this.getRowId(e)}\u0000${t.key}`;
 	}
 	_markCellInvalid(e, t, n) {
 		let r = this._cellKey(e, t), i = this._invalidCells.get(r);
@@ -3888,38 +3949,40 @@ var K = {
 		}, this._fillDrag.targetRange = u, this.requestUpdate();
 	}
 	_applyFillHandle(e, t) {
-		let n = this.visibleColumns, r = [];
-		for (let i = t.startCol; i <= t.endCol; i++) {
-			let a = n[i], o = [];
-			for (let t = e.startRow; t <= e.endRow; t++) o.push(this.data[this._toDataIndex(t)][a.key]);
-			let s = this._detectNumericSeries(o);
+		let n = this.visibleColumns, r = [], i = [];
+		for (let a = t.startCol; a <= t.endCol; a++) {
+			let o = n[a], s = [];
+			for (let t = e.startRow; t <= e.endRow; t++) s.push(this.data[this._toDataIndex(t)][o.key]);
+			let c = this._detectNumericSeries(s);
 			for (let n = t.startRow; n <= t.endRow; n++) {
 				if (n >= e.startRow && n <= e.endRow) continue;
-				let t = this._toDataIndex(n), i = this.data[t][a.key], c;
-				if (s && n > e.endRow) {
-					let t = n - e.endRow, r = s.last + s.diff * t;
-					c = a.type === "number" ? r : String(r);
+				let t = this._toDataIndex(n), a = this.data[t][o.key], l;
+				if (c && n > e.endRow) {
+					let t = n - e.endRow, r = c.last + c.diff * t;
+					l = o.type === "number" ? r : String(r);
 				} else {
-					let t = (n - e.startRow) % o.length;
-					c = o[t < 0 ? t + o.length : t];
+					let t = (n - e.startRow) % s.length;
+					l = s[t < 0 ? t + s.length : t];
 				}
-				this.data[t][a.key] = c, r.push({
+				this.data[t][o.key] = l, r.push({
 					dataRow: t,
-					key: a.key,
-					oldValue: i,
-					newValue: c
-				});
+					key: o.key,
+					oldValue: a,
+					newValue: l
+				}), i.push(this.data[t]);
 			}
 		}
 		r.length > 0 && (this._undo.push({
 			label: "fill-handle",
 			undo: () => {
-				for (let e of r) this.data[e.dataRow][e.key] = e.oldValue;
-				this.requestUpdate();
+				r.forEach((e, t) => {
+					i[t][e.key] = e.oldValue;
+				}), this.requestUpdate();
 			},
 			redo: () => {
-				for (let e of r) this.data[e.dataRow][e.key] = e.newValue;
-				this.requestUpdate();
+				r.forEach((e, t) => {
+					i[t][e.key] = e.newValue;
+				}), this.requestUpdate();
 			}
 		}), this._dispatchUndoStateEvent(), this._emit("fill-handle-apply", {
 			sourceRange: e,
@@ -4083,25 +4146,27 @@ var K = {
 	}
 	_replaceAll() {
 		if (!this._findState || this._findState.results.length === 0) return;
-		let { results: e, replaceWith: t } = this._findState, n = this.visibleColumns, r = [];
-		for (let { row: i, col: a } of e) {
-			let e = this._toDataIndex(i), o = n[a].key, s = this.data[e][o];
-			this.data[e][o] = t, r.push({
+		let { results: e, replaceWith: t } = this._findState, n = this.visibleColumns, r = [], i = [];
+		for (let { row: a, col: o } of e) {
+			let e = this._toDataIndex(a), s = n[o].key, c = this.data[e][s];
+			this.data[e][s] = t, r.push({
 				dataRow: e,
-				key: o,
-				oldValue: s,
+				key: s,
+				oldValue: c,
 				newValue: t
-			});
+			}), i.push(this.data[e]);
 		}
 		r.length > 0 && (this._undo.push({
 			label: "replace-all",
 			undo: () => {
-				for (let e of r) this.data[e.dataRow][e.key] = e.oldValue;
-				this.requestUpdate();
+				r.forEach((e, t) => {
+					i[t][e.key] = e.oldValue;
+				}), this.requestUpdate();
 			},
 			redo: () => {
-				for (let e of r) this.data[e.dataRow][e.key] = e.newValue;
-				this.requestUpdate();
+				r.forEach((e, t) => {
+					i[t][e.key] = e.newValue;
+				}), this.requestUpdate();
 			}
 		}), this._dispatchUndoStateEvent(), this._emit("find-replace", {
 			type: "replace-all",
@@ -4115,21 +4180,21 @@ var K = {
 	}
 	_replaceOne() {
 		if (!this._findState || this._findState.results.length === 0) return;
-		let { currentIndex: e, results: t, replaceWith: n } = this._findState, { row: r, col: i } = t[e], a = this._toDataIndex(r), o = this.visibleColumns[i].key, s = this.data[a][o];
-		this.data[a][o] = n, this._undo.push({
+		let { currentIndex: e, results: t, replaceWith: n } = this._findState, { row: r, col: i } = t[e], a = this._toDataIndex(r), o = this.visibleColumns[i].key, s = this.data[a], c = s[o];
+		s[o] = n, this._undo.push({
 			label: "replace",
 			undo: () => {
-				this.data[a][o] = s, this.requestUpdate();
+				s[o] = c, this.requestUpdate();
 			},
 			redo: () => {
-				this.data[a][o] = n, this.requestUpdate();
+				s[o] = n, this.requestUpdate();
 			}
 		}), this._dispatchUndoStateEvent(), this._emit("find-replace", {
 			type: "replace",
 			cells: [{
 				row: a,
 				col: o,
-				oldValue: s,
+				oldValue: c,
 				newValue: n
 			}]
 		}), this._findSearch(), this._findGoTo(Math.min(e, this._findState.results.length - 1));
@@ -4363,7 +4428,7 @@ var K = {
           ${this._renderEditor(e, t)}
         </div>
       `;
-		let v = s || l, y = this._isCellInvalid(n, r), b = (this._findState?.results ?? []).findIndex((e) => e.row === n && e.col === r), x = b >= 0, S = x && b === this._findState.currentIndex, C = [
+		let v = s || l, y = this._isCellInvalid(e, t), b = (this._findState?.results ?? []).findIndex((e) => e.row === n && e.col === r), x = b >= 0, S = x && b === this._findState.currentIndex, C = [
 			"ft-cell",
 			`ft-type-${t.type ?? "text"}`,
 			`ft-align-${W(t)}`,
@@ -4376,9 +4441,9 @@ var K = {
 			i?.continues ? "ft-merge-continued" : "",
 			i?.opensDown ? "ft-merge-open" : "",
 			t.reveal === "hover" ? "ft-reveal-hover" : ""
-		].filter(Boolean).join(" "), w = this._toDataIndex(n), T = this._comments.get(w)?.get(t.key) ?? null, E = T !== null, O = E ? a`<div class="ft-comment-indicator" title=${T}></div>` : o;
+		].filter(Boolean).join(" "), w = this._comments.size > 0 ? this._comments.get(this.getRowId(e))?.get(t.key) ?? null : null, T = w !== null, E = T ? a`<div class="ft-comment-indicator" title=${w}></div>` : o;
 		return a`
-      <div class=${E ? C + " ft-has-comment" : C}
+      <div class=${T ? C + " ft-has-comment" : C}
         role="gridcell"
         tabindex="-1"
         aria-colindex=${r + 1}
@@ -4392,7 +4457,7 @@ var K = {
         @mouseenter=${() => this._onCellMouseEnter(n, r)}
         @click=${(e) => this._onCellClickEvent(e, n, r)}
         @dblclick=${() => this._onCellDblClick(n, r)}>
-        ${O}
+        ${E}
         ${D(e[t.key], e, t)}
       </div>
     `;
@@ -4404,7 +4469,7 @@ var K = {
         <input class="ft-editor ft-editor-number" type="text" inputmode="decimal" aria-label=${t.label}
           .value=${typeof n == "number" ? M(n) : r}
           @keydown=${this._onEditorKeyDown}
-          @blur=${() => this._commitEdit()}>
+          @blur=${this._onEditorBlur}>
       `;
 		if (t.type === "date" || t.type === "datetime") {
 			let e = t.type === "datetime";
@@ -4414,7 +4479,7 @@ var K = {
           .value=${Ze(n, e)}
           @keydown=${this._onEditorKeyDown}
           @change=${() => this._commitEdit()}
-          @blur=${() => this._commitEdit()}></u-date-picker>
+          @blur=${this._onEditorBlur}></u-date-picker>
       `;
 		}
 		if (t.type === "select" && t.options && t.options.length > 0) {
@@ -4422,7 +4487,7 @@ var K = {
 			return a`
         <select class="ft-editor" aria-label=${t.label}
           @keydown=${this._onEditorKeyDown}
-          @blur=${() => this._commitEdit()}
+          @blur=${this._onEditorBlur}
           @change=${() => this._commitEdit()}>
           ${r ? e.map((e) => a`<option value=${e} ?selected=${e === n}>${e}</option>`) : e.map((e) => a`<option value=${String(e.value)} ?selected=${e.value === n}>${e.label}</option>`)}
         </select>
@@ -4439,7 +4504,7 @@ var K = {
           .value=${r}
           @input=${(e) => this._onAutocompleteInput(e, t)}
           @keydown=${this._onEditorKeyDown}
-          @blur=${() => this._commitEdit()}>
+          @blur=${this._onEditorBlur}>
         ${e.length > 0 ? a`
           <div class="ft-autocomplete-dropdown" id="ft-autocomplete-list" role="listbox" aria-label=${t.label}>
             ${e.map((e, t) => a`
@@ -4459,7 +4524,7 @@ var K = {
       <input class="ft-editor" type="text" aria-label=${t.label}
         .value=${r}
         @keydown=${this._onEditorKeyDown}
-        @blur=${() => this._commitEdit()}>
+        @blur=${this._onEditorBlur}>
     `;
 	}
 };
@@ -4534,4 +4599,4 @@ function $(e) {
 	}
 }
 //#endregion
-export { k as a, A as i, W as n, D as o, z as r, Q as t };
+export { O as a, A as i, W as n, D as o, z as r, Q as t };

package/dist/flex-table.d.ts

@@ -175,6 +175,7 @@ export declare class FlexTable extends LitElement {
     private _columnWidths;
     private _hostResizeObserver;
     /** Keyed by dataIndex → colKey → comment text */
+    /** Cell comments by row id (`getRowId`) and column key — they stay on their rows when rows move. */
     private _comments;
     private _isDragOver;
     get visibleColumns(): ColumnDefinition[];
@@ -228,6 +229,8 @@ export declare class FlexTable extends LitElement {
     private _dispatchRowSelectionEvent;
     /** Ids of the rows in view, top to bottom (after filter and sort). Cached per view and `rowKey`. */
     private _visibleRowIds;
+    /** Drops comments on `#n` rows `data` no longer holds — such a row cannot come back. */
+    private _pruneGoneUnkeyedComments;
     /** Drops selected `#n` ids whose rows `data` no longer holds. Returns whether anything was dropped. */
     private _pruneGoneUnkeyedRows;
     /**
@@ -341,10 +344,11 @@ export declare class FlexTable extends LitElement {
      */
     getComment(dataIndex: number, colKey: string): string | null;
     /**
-     * Get all comments as a flat array.
+     * Every comment on a row `data` holds, in `data` order — with the row's current index and its id.
      */
     getAllComments(): Array<{
         dataIndex: number;
+        id: string;
         colKey: string;
         text: string;
     }>;
@@ -406,8 +410,20 @@ export declare class FlexTable extends LitElement {
     protected updated(changedProps: PropertyValues): void;
     /** Recompute filter → sort pipeline. */
     private _recomputeView;
+    /**
+     * Keeps an open editor on the row it was started on after the view changed under it (a refresh put
+     * rows above it, a sort moved it). A row that left `data`, or that a filter hid, ends the edit.
+     */
+    private _followEditingRow;
     /** Map visual row index to data row index */
     private _toDataIndex;
+    /** Set while the edited row's editor is drawn again in the row's new place (cleared after that update). */
+    private _editorMoving;
+    /**
+     * Blur commits the edit — except the blur of the editor the update is replacing because its row
+     * moved (Chromium fires it while removing the element) or of one already gone.
+     */
+    private _onEditorBlur;
     private _focusEditor;
     private _measureViewport;
     private _warnedUnconstrained;
@@ -601,6 +617,7 @@ export declare class FlexTable extends LitElement {
     private _renderNumberFilter;
     /** 셀 오류 표시 — 우리 문장은 «그릴 때 찾는» 함수로(로캘 전환에 따라오게), 소비자 `validator` 문장은 그대로. */
     private _invalidCells;
+    /** A cell named by its row's id and its column's key — so the mark stays on the cell when the view reorders. */
     private _cellKey;
     private _markCellInvalid;
     private _isCellInvalid;

package/dist/flex-table.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-M_oC8OXD.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-DKBcfNA4.js";
 import { t as o } from "./locale-Cfm-vJji.js";
 export { a as FlexTable, e as RowSelectionState, t as UndoStack, n as effectiveAlign, i as exportData, o as flexTableLocale, r as renderCell };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-M_oC8OXD.js";
+import { t as e } from "./flex-table-DKBcfNA4.js";
 import { i as t } from "./query-Dw4iO0ir.js";
 import { t as n } from "./source--q5s2Oti.js";
 import { t as r } from "./view-DiLr-TdY.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.56.0",
+  "version": "0.56.1",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

package/skills/iyulab-flex-table/references/api.md

@@ -146,7 +146,7 @@ cast, and the React `on*` props carry the same types.
 | `cell-select` | `{ row, col }` (or `null`) |
 | `cell-edit-start` | `{ row, col, key, value }` |
 | `cell-edit-commit` | `{ row, col, key, oldValue, newValue }` |
-| `cell-edit-cancel` | `{ row, col }` |
+| `cell-edit-cancel` | `{ row, col }` — `row`: data index (`-1` once the row left `data`) |
 | `validation-error` | `{ row, col, key, value, error }` |
 | `row-add` | `{ row, index }` |
 | `row-delete` | `{ indices, rows }` |
@@ -168,7 +168,7 @@ cast, and the React `on*` props carry the same types.
 | `clipboard-error` | `{ action: 'copy' \| 'paste', error }` — copy could not put the text on the clipboard (no `clipboard-copy`/`clipboard-cut` follows; a cut clears nothing), or paste could not read it |
 | `fill-handle-apply` | `{ sourceRange, targetRange, cells }` |
 | `find-replace` | `{ type: 'replace' \| 'replace-all', cells }` |
-| `comment-change` | `{ dataIndex, colKey, text }` |
+| `comment-change` | `{ dataIndex, id, colKey, text }` |
 | `data-import` | `{ count }` |
 | `undo-state-change` | `{ canUndo, canRedo }` |
 | `context-menu` | `{ x, y, row, col, key, value, rowData }` — cancelable; `preventDefault()` suppresses the built-in menu |