@mozaic-ds/angular 2.0.41 → 2.0.42

package/fesm2022/mozaic-ds-angular.mjs

@@ -4897,6 +4897,7 @@ class GridStateManager {
     scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
     scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
     scrollViewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollViewportWidth" }] : /* istanbul ignore next */ []));
+    scrollViewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "scrollViewportHeight" }] : /* istanbul ignore next */ []));
     scrollContentTotalWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollContentTotalWidth" }] : /* istanbul ignore next */ []));
     // --- Horizontal virtual scroll ---
     horizontalVirtualScrollEnabled = signal(false, ...(ngDevMode ? [{ debugName: "horizontalVirtualScrollEnabled" }] : /* istanbul ignore next */ []));
@@ -4919,6 +4920,8 @@ class GridStateManager {
     isFilling = signal(false, ...(ngDevMode ? [{ debugName: "isFilling" }] : /* istanbul ignore next */ []));
     fillAnchor = signal(null, ...(ngDevMode ? [{ debugName: "fillAnchor" }] : /* istanbul ignore next */ []));
     fillTarget = signal(null, ...(ngDevMode ? [{ debugName: "fillTarget" }] : /* istanbul ignore next */ []));
+    // --- Cut (Ctrl+X) source — drives the marching-ants outline in view ---
+    cutSource = signal(null, ...(ngDevMode ? [{ debugName: "cutSource" }] : /* istanbul ignore next */ []));
     // --- Expandable Rows ---
     expandedRowIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRowIds" }] : /* istanbul ignore next */ []));
     rowIdField = signal('id', ...(ngDevMode ? [{ debugName: "rowIdField" }] : /* istanbul ignore next */ []));
@@ -5524,8 +5527,485 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Injectable
         }] });
 
+const PASTE_SKIP$1 = Symbol('PASTE_SKIP');
+/**
+ * Applies a set of cell-level mutations to sourceData and returns the list of
+ * actual changes that occurred, so the caller (usually the history engine) can
+ * record them. `PASTE_SKIP` return values are filtered out transparently.
+ */
+class ClipboardEngine {
+    state = inject(GridStateManager);
+    /** Derived by components (marching-ants outline). */
+    cutRange = computed(() => this.state.cutSource(), ...(ngDevMode ? [{ debugName: "cutRange" }] : /* istanbul ignore next */ []));
+    markCut(range) {
+        this.state.cutSource.set(range);
+    }
+    clearCut() {
+        this.state.cutSource.set(null);
+    }
+    /** Vertical fill: row 0 of the range is the source, subsequent rows are targets. */
+    fillDown(range) {
+        if (range.start.row === range.end.row)
+            return [];
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            const sourceRow = updated[range.start.row];
+            if (!sourceRow)
+                return updated;
+            for (let r = range.start.row + 1; r <= range.end.row; r++) {
+                if (!updated[r])
+                    continue;
+                const rowCopy = { ...updated[r] };
+                let changed = false;
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const sourceValue = def.valueGetter
+                        ? def.valueGetter(sourceRow)
+                        : sourceRow[field];
+                    const coerced = this.coerceAndValidate(field, sourceValue, updated[r]);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = updated[r][field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Horizontal fill: col 0 of the range is the source, subsequent cols are targets. */
+    fillRight(range) {
+        if (range.start.col === range.end.col)
+            return [];
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const sourceField = cols[range.start.col]?.field;
+        if (!sourceField)
+            return [];
+        const sourceDef = defMap.get(sourceField);
+        if (!sourceDef)
+            return [];
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const row = updated[r];
+                if (!row)
+                    continue;
+                const sourceValue = sourceDef.valueGetter
+                    ? sourceDef.valueGetter(row)
+                    : row[sourceField];
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let c = range.start.col + 1; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, sourceValue, row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Ctrl+Enter: write `value` into every editable cell of `range`. */
+    fillSelection(range, value) {
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const row = updated[r];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, value, row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Clears every editable cell in `range` and returns the undo payload. */
+    clearRange(range) {
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const row = updated[r];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, null, row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Applies TSV `pasteRows` starting at `range.start`, returning actual changes. */
+    applyPaste(range, pasteRows) {
+        const cols = this.state.visibleColumns();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let ri = 0; ri < pasteRows.length; ri++) {
+                const targetRow = range.start.row + ri;
+                if (targetRow >= updated.length)
+                    break;
+                const row = updated[targetRow];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let ci = 0; ci < pasteRows[ri].length; ci++) {
+                    const targetCol = range.start.col + ci;
+                    if (targetCol >= cols.length)
+                        break;
+                    const field = cols[targetCol]?.field;
+                    if (!field)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, pasteRows[ri][ci], row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: targetRow, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[targetRow] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /**
+     * Reverses a previously-recorded list of changes by writing `before` back into
+     * the cells. Used by the history engine for both undo and redo.
+     */
+    applyChanges(changes, direction) {
+        if (changes.length === 0)
+            return;
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            // Group changes by rowIndex so each row is cloned once.
+            const byRow = new Map();
+            for (const change of changes) {
+                const list = byRow.get(change.rowIndex) ?? [];
+                list.push(change);
+                byRow.set(change.rowIndex, list);
+            }
+            for (const [rowIndex, rowChanges] of byRow) {
+                const row = updated[rowIndex];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                for (const change of rowChanges) {
+                    rowCopy[change.field] = direction === 'before' ? change.before : change.after;
+                }
+                updated[rowIndex] = rowCopy;
+            }
+            return updated;
+        });
+    }
+    /**
+     * Coerces a raw value (string from TSV, unknown from fill, null for clears)
+     * into the editor's expected type, running the field's validator when present.
+     * Returns PASTE_SKIP when the column isn't editable or the value is rejected.
+     */
+    coerceAndValidate(field, rawValue, row) {
+        const def = this.state.columnDefMap().get(field);
+        if (!def?.editable)
+            return PASTE_SKIP$1;
+        const editorType = def.cellEditor;
+        if (rawValue === null) {
+            let clearValue;
+            switch (editorType) {
+                case 'number':
+                    clearValue = null;
+                    break;
+                case 'checkbox':
+                    clearValue = false;
+                    break;
+                default:
+                    clearValue = '';
+            }
+            if (def.cellEditorValidator) {
+                const result = def.cellEditorValidator(clearValue, row);
+                if (result === false || typeof result === 'string')
+                    return PASTE_SKIP$1;
+            }
+            return clearValue;
+        }
+        let value = rawValue;
+        if (editorType === 'number') {
+            const num = Number(rawValue);
+            if (isNaN(num))
+                return PASTE_SKIP$1;
+            value = num;
+        }
+        else if (editorType === 'checkbox') {
+            if (rawValue === 'true' || rawValue === true) {
+                value = true;
+            }
+            else if (rawValue === 'false' || rawValue === false) {
+                value = false;
+            }
+            else {
+                return PASTE_SKIP$1;
+            }
+        }
+        else if (editorType === 'select' && def.cellEditorOptions?.length) {
+            const allowed = def.cellEditorOptions.map((o) => String(o.value));
+            if (!allowed.includes(String(rawValue)))
+                return PASTE_SKIP$1;
+            value = rawValue;
+        }
+        if (def.cellEditorValidator) {
+            const result = def.cellEditorValidator(value, row);
+            if (result === false || typeof result === 'string')
+                return PASTE_SKIP$1;
+        }
+        return value;
+    }
+    /** TSV string for a range — used by copy / cut. */
+    extractTsv(range) {
+        const cols = this.state.visibleColumns();
+        const data = this.state.sourceData();
+        const defMap = this.state.columnDefMap();
+        const values = [];
+        for (let r = range.start.row; r <= range.end.row; r++) {
+            const row = data[r];
+            if (!row)
+                continue;
+            const rowValues = [];
+            for (let c = range.start.col; c <= range.end.col; c++) {
+                const field = cols[c]?.field;
+                if (!field) {
+                    rowValues.push('');
+                    continue;
+                }
+                const def = defMap.get(field);
+                const val = def?.valueGetter
+                    ? def.valueGetter(row)
+                    : row[field];
+                rowValues.push(val != null ? String(val) : '');
+            }
+            values.push(rowValues);
+        }
+        return values;
+    }
+    /**
+     * Checks whether a cell sits on any edge of the current cut outline. Four
+     * booleans rather than a single "isCut" so the view can paint only the edges
+     * that face outward — which is what produces the Excel-like marching ants.
+     */
+    cutEdges(row, col) {
+        const cut = this.state.cutSource();
+        if (!cut)
+            return { top: false, right: false, bottom: false, left: false, any: false };
+        const minRow = Math.min(cut.start.row, cut.end.row);
+        const maxRow = Math.max(cut.start.row, cut.end.row);
+        const minCol = Math.min(cut.start.col, cut.end.col);
+        const maxCol = Math.max(cut.start.col, cut.end.col);
+        if (row < minRow || row > maxRow || col < minCol || col > maxCol) {
+            return { top: false, right: false, bottom: false, left: false, any: false };
+        }
+        return {
+            top: row === minRow,
+            right: col === maxCol,
+            bottom: row === maxRow,
+            left: col === minCol,
+            any: true,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClipboardEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClipboardEngine });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClipboardEngine, decorators: [{
+            type: Injectable
+        }] });
+
+const MAX_HISTORY = 50;
+const STORAGE_PREFIX = 'moz-grid-history:';
+class HistoryEngine {
+    clipboard = inject(ClipboardEngine);
+    past = signal([], ...(ngDevMode ? [{ debugName: "past" }] : /* istanbul ignore next */ []));
+    future = signal([], ...(ngDevMode ? [{ debugName: "future" }] : /* istanbul ignore next */ []));
+    storageKey = null;
+    canUndo = computed(() => this.past().length > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    canRedo = computed(() => this.future().length > 0, ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    /**
+     * Binds a persistence key: all record/undo/redo calls will mirror the stacks
+     * to localStorage, and past state is restored on bind. Pass null to detach.
+     */
+    attach(gridId) {
+        this.storageKey = gridId ? `${STORAGE_PREFIX}${gridId}` : null;
+        if (!this.storageKey) {
+            this.past.set([]);
+            this.future.set([]);
+            return;
+        }
+        this.restore();
+    }
+    /** Records a new mutation. Clears the redo stack (standard undo semantics). */
+    record(type, changes) {
+        if (changes.length === 0)
+            return;
+        const op = { type, changes, timestamp: Date.now() };
+        this.past.update((stack) => {
+            const next = [...stack, op];
+            return next.length > MAX_HISTORY ? next.slice(next.length - MAX_HISTORY) : next;
+        });
+        this.future.set([]);
+        this.persist();
+    }
+    undo() {
+        const stack = this.past();
+        if (stack.length === 0)
+            return null;
+        const op = stack[stack.length - 1];
+        this.clipboard.applyChanges(op.changes, 'before');
+        this.past.set(stack.slice(0, -1));
+        this.future.update((f) => [...f, op]);
+        this.persist();
+        return op;
+    }
+    redo() {
+        const stack = this.future();
+        if (stack.length === 0)
+            return null;
+        const op = stack[stack.length - 1];
+        this.clipboard.applyChanges(op.changes, 'after');
+        this.future.set(stack.slice(0, -1));
+        this.past.update((p) => [...p, op]);
+        this.persist();
+        return op;
+    }
+    clear() {
+        this.past.set([]);
+        this.future.set([]);
+        if (this.storageKey) {
+            try {
+                localStorage.removeItem(this.storageKey);
+            }
+            catch {
+                // Storage unavailable (private mode, quota) — non-fatal.
+            }
+        }
+    }
+    persist() {
+        if (!this.storageKey)
+            return;
+        try {
+            const payload = JSON.stringify({
+                past: this.past(),
+                future: this.future(),
+            });
+            localStorage.setItem(this.storageKey, payload);
+        }
+        catch {
+            // Quota exceeded or storage disabled — we silently drop persistence.
+        }
+    }
+    restore() {
+        if (!this.storageKey)
+            return;
+        try {
+            const raw = localStorage.getItem(this.storageKey);
+            if (!raw) {
+                this.past.set([]);
+                this.future.set([]);
+                return;
+            }
+            const parsed = JSON.parse(raw);
+            this.past.set(Array.isArray(parsed.past) ? parsed.past : []);
+            this.future.set(Array.isArray(parsed.future) ? parsed.future : []);
+        }
+        catch {
+            this.past.set([]);
+            this.future.set([]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HistoryEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HistoryEngine });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HistoryEngine, decorators: [{
+            type: Injectable
+        }] });
+
 class InlineEditEngine {
     state = inject(GridStateManager);
+    history = inject(HistoryEngine);
     startEdit(rowIndex, field) {
         const defMap = this.state.columnDefMap();
         const def = defMap.get(field);
@@ -5545,6 +6025,54 @@ class InlineEditEngine {
             validationError: null,
         });
     }
+    /**
+     * Excel-style "typing-to-edit": starts the editor with the cell value replaced
+     * by the character the user just typed. For non-text editors (select / date /
+     * checkbox / number) we coerce: the character is kept if it's compatible with
+     * the editor, otherwise the editor opens on a cleared value.
+     */
+    startEditWithChar(rowIndex, field, char) {
+        const defMap = this.state.columnDefMap();
+        const def = defMap.get(field);
+        if (!def?.editable)
+            return;
+        const colIndex = this.state.visibleColumns().findIndex((c) => c.field === field);
+        if (colIndex < 0)
+            return;
+        const row = this.state.sourceData()[rowIndex];
+        if (!row)
+            return;
+        const currentValue = def.valueGetter
+            ? def.valueGetter(row)
+            : row[field];
+        const editorType = def.cellEditor ?? this.resolveEditorType(field, currentValue);
+        let draftValue = char;
+        switch (editorType) {
+            case 'number': {
+                const n = Number(char);
+                draftValue = Number.isNaN(n) ? '' : n;
+                break;
+            }
+            case 'checkbox':
+                // A character press toggles the checkbox to true — closest Excel-equivalent
+                // (Excel doesn't have checkbox cells but booleans flip on typing).
+                draftValue = true;
+                break;
+            case 'select':
+            case 'date':
+                // These editors have picker UIs; typing just opens them with an empty draft.
+                draftValue = '';
+                break;
+            default:
+                draftValue = char;
+        }
+        this.state.cellEditState.set({
+            editingCell: { row: rowIndex, col: colIndex },
+            originalValue: currentValue,
+            draftValue,
+            validationError: null,
+        });
+    }
     updateDraft(value) {
         this.state.cellEditState.update((s) => ({ ...s, draftValue: value }));
     }
@@ -5596,6 +6124,11 @@ class InlineEditEngine {
             oldValue: editState.originalValue,
             newValue: editState.draftValue,
         };
+        if (this.state.mode() === 'client' && event.oldValue !== event.newValue) {
+            this.history.record('edit', [
+                { rowIndex, field, before: event.oldValue, after: event.newValue },
+            ]);
+        }
         this.state.cellEditState.set({
             editingCell: null,
             originalValue: undefined,
@@ -5880,24 +6413,290 @@ class CellSelectionEngine {
         if (!this.state.isDragging())
             return;
         const range = this.state.cellRange();
-        if (!range)
+        if (!range)
+            return;
+        this.state.cellRange.set({ start: range.start, end: { row, col } });
+    }
+    endRangeSelection() {
+        this.state.isDragging.set(false);
+    }
+    moveUp() {
+        this.moveBy(-1, 0);
+    }
+    moveDown() {
+        this.moveBy(1, 0);
+    }
+    moveLeft() {
+        this.moveBy(0, -1);
+    }
+    moveRight() {
+        this.moveBy(0, 1);
+    }
+    // --- Home / End / Grid bounds -------------------------------------------------
+    moveToRowStart() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        this.focusCell(focused.row, 0, 'keyboard');
+    }
+    moveToRowEnd() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.focusCell(focused.row, this.findLastNonEmptyCol(focused.row, maxCol), 'keyboard');
+    }
+    moveToGridStart() {
+        const pageStart = this.state.pageIndex() * this.state.pageSize();
+        this.focusCell(pageStart, 0, 'keyboard');
+    }
+    moveToGridEnd() {
+        const pageStart = this.state.pageIndex() * this.state.pageSize();
+        const pageEnd = pageStart + Math.max(0, this.state.visibleRowCount() - 1);
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.focusCell(pageEnd, this.findLastNonEmptyCol(pageEnd, maxCol), 'keyboard');
+    }
+    /**
+     * Excel-style Ctrl+Arrow: jump to the edge of the current data block.
+     * If on an empty cell, jumps to the next non-empty cell. If on a filled
+     * cell, jumps to the last filled cell before the next empty transition
+     * (or to the grid edge if no empty cell is encountered).
+     */
+    jumpToEdge(direction) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const { dRow, dCol } = this.directionVector(direction);
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const startFilled = this.isCellFilled(focused.row, focused.col);
+        let row = focused.row;
+        let col = focused.col;
+        // Step once to start looking at the neighbour
+        let nextRow = row + dRow;
+        let nextCol = col + dCol;
+        while (this.inBounds(nextRow, nextCol, bounds, maxCol)) {
+            const filled = this.isCellFilled(nextRow, nextCol);
+            if (startFilled) {
+                // Moving through filled cells — stop right before the next empty gap.
+                if (!filled)
+                    break;
+                row = nextRow;
+                col = nextCol;
+            }
+            else {
+                // Moving through empty cells — stop on the first filled cell we meet.
+                if (filled) {
+                    row = nextRow;
+                    col = nextCol;
+                    break;
+                }
+                row = nextRow;
+                col = nextCol;
+            }
+            nextRow += dRow;
+            nextCol += dCol;
+        }
+        this.focusCell(row, col, 'keyboard');
+    }
+    movePage(direction) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const step = this.pageRowStep() * (direction === 'down' ? 1 : -1);
+        this.moveBy(step, 0);
+    }
+    // --- Shift + navigation : extend current range --------------------------------
+    extendRangeBy(dRow, dCol) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const range = this.state.cellRange();
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const currentEnd = range ? range.end : focused;
+        const newEnd = {
+            row: Math.max(bounds.start, Math.min(bounds.end, currentEnd.row + dRow)),
+            col: Math.max(0, Math.min(maxCol, currentEnd.col + dCol)),
+        };
+        const start = range ? range.start : focused;
+        this.state.cellRange.set({ start, end: newEnd });
+    }
+    extendRangeToRowStart() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: (range?.end ?? focused).row, col: 0 } });
+    }
+    extendRangeToRowEnd() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: (range?.end ?? focused).row, col: maxCol } });
+    }
+    extendRangeToGridStart() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const bounds = this.pageBounds();
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: bounds.start, col: 0 } });
+    }
+    extendRangeToGridEnd() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: bounds.end, col: maxCol } });
+    }
+    extendRangeJumpToEdge(direction) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const range = this.state.cellRange();
+        const anchor = range?.start ?? focused;
+        const end = range?.end ?? focused;
+        const target = this.edgeFromCell(end, direction);
+        this.state.cellRange.set({ start: anchor, end: target });
+    }
+    extendRangeByPage(direction) {
+        const step = this.pageRowStep() * (direction === 'down' ? 1 : -1);
+        this.extendRangeBy(step, 0);
+    }
+    // --- Whole row / column / grid selection --------------------------------------
+    selectRow(row) {
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
             return;
-        this.state.cellRange.set({ start: range.start, end: { row, col } });
+        this.state.focusedCell.set({ row, col: 0 });
+        this.state.focusSource.set('keyboard');
+        this.state.cellRange.set({
+            start: { row, col: 0 },
+            end: { row, col: maxCol },
+        });
     }
-    endRangeSelection() {
-        this.state.isDragging.set(false);
+    selectColumn(col) {
+        const bounds = this.pageBounds();
+        this.state.focusedCell.set({ row: bounds.start, col });
+        this.state.focusSource.set('keyboard');
+        this.state.cellRange.set({
+            start: { row: bounds.start, col },
+            end: { row: bounds.end, col },
+        });
     }
-    moveUp() {
-        this.moveBy(-1, 0);
+    selectAll() {
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.state.focusedCell.set({ row: bounds.start, col: 0 });
+        this.state.focusSource.set('keyboard');
+        this.state.cellRange.set({
+            start: { row: bounds.start, col: 0 },
+            end: { row: bounds.end, col: maxCol },
+        });
     }
-    moveDown() {
-        this.moveBy(1, 0);
+    // --- Private helpers ----------------------------------------------------------
+    pageBounds() {
+        const start = this.state.pageIndex() * this.state.pageSize();
+        const end = start + Math.max(0, this.state.visibleRowCount() - 1);
+        return { start, end };
+    }
+    pageRowStep() {
+        const rowHeight = this.state.rowHeight() || 48;
+        const viewportHeight = this.state.scrollViewportHeight();
+        if (viewportHeight > 0) {
+            return Math.max(1, Math.floor(viewportHeight / rowHeight));
+        }
+        // Fallback: a sensible default when the viewport hasn't been measured yet.
+        return Math.max(1, Math.floor(this.state.visibleRowCount() / 2) || 10);
+    }
+    directionVector(dir) {
+        switch (dir) {
+            case 'up':
+                return { dRow: -1, dCol: 0 };
+            case 'down':
+                return { dRow: 1, dCol: 0 };
+            case 'left':
+                return { dRow: 0, dCol: -1 };
+            case 'right':
+                return { dRow: 0, dCol: 1 };
+        }
+    }
+    inBounds(row, col, bounds, maxCol) {
+        return row >= bounds.start && row <= bounds.end && col >= 0 && col <= maxCol;
+    }
+    isCellFilled(row, col) {
+        const cols = this.state.visibleColumns();
+        const field = cols[col]?.field;
+        if (!field)
+            return false;
+        const data = this.state.sourceData();
+        const rowData = data[row];
+        if (!rowData)
+            return false;
+        const def = this.state.columnDefMap().get(field);
+        const value = def?.valueGetter
+            ? def.valueGetter(rowData)
+            : rowData[field];
+        return value !== null && value !== undefined && value !== '';
     }
-    moveLeft() {
-        this.moveBy(0, -1);
+    findLastNonEmptyCol(row, maxCol) {
+        for (let c = maxCol; c >= 0; c--) {
+            if (this.isCellFilled(row, c))
+                return c;
+        }
+        return maxCol;
     }
-    moveRight() {
-        this.moveBy(0, 1);
+    edgeFromCell(from, direction) {
+        const { dRow, dCol } = this.directionVector(direction);
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return from;
+        const startFilled = this.isCellFilled(from.row, from.col);
+        let row = from.row;
+        let col = from.col;
+        let nextRow = row + dRow;
+        let nextCol = col + dCol;
+        while (this.inBounds(nextRow, nextCol, bounds, maxCol)) {
+            const filled = this.isCellFilled(nextRow, nextCol);
+            if (startFilled) {
+                if (!filled)
+                    break;
+            }
+            else if (filled) {
+                row = nextRow;
+                col = nextCol;
+                break;
+            }
+            row = nextRow;
+            col = nextCol;
+            nextRow += dRow;
+            nextCol += dCol;
+        }
+        return { row, col };
     }
     moveToNextEditableCell() {
         const focused = this.state.focusedCell();
@@ -6162,113 +6961,203 @@ class KeyboardEngine {
     cellSelection = inject(CellSelectionEngine);
     inlineEdit = inject(InlineEditEngine);
     state = inject(GridStateManager);
+    actions = null;
+    registerActions(actions) {
+        this.actions = actions;
+    }
     handleKeydown(event) {
-        // Edit mode keys are handled by MozGridComponent.handleEditModeKeydown
-        const editState = this.state.cellEditState();
-        if (editState.editingCell !== null)
+        // Edit-mode keys are handled by MozGridComponent.handleEditModeKeydown;
+        // this engine only owns navigation + shortcuts in non-editing state.
+        if (this.state.cellEditState().editingCell !== null)
             return;
-        this.handleNavigationKey(event);
-    }
-    handleNavigationKey(event) {
         const focused = this.state.focusedCell();
         if (!focused)
             return;
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(-1, 0);
-                }
-                else {
-                    this.cellSelection.moveUp();
-                }
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(1, 0);
-                }
-                else {
-                    this.cellSelection.moveDown();
-                }
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(0, -1);
-                }
-                else {
-                    this.cellSelection.moveLeft();
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(0, 1);
-                }
-                else {
-                    this.cellSelection.moveRight();
-                }
-                break;
-            case 'Tab':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.cellSelection.moveLeft();
-                }
-                else {
-                    this.cellSelection.moveRight();
-                }
-                break;
-            case 'Enter': {
-                event.preventDefault();
-                const col = this.state.visibleColumns()[focused.col];
-                if (col) {
-                    const def = this.state.columnDefMap().get(col.field);
-                    if (def?.editable) {
-                        this.inlineEdit.startEdit(focused.row, col.field);
-                    }
-                }
-                break;
+        if (this.dispatch(event, focused)) {
+            event.preventDefault();
+        }
+    }
+    /** Returns true when the event was handled (so the caller should preventDefault). */
+    dispatch(event, focused) {
+        const mod = event.ctrlKey || event.metaKey;
+        const shift = event.shiftKey;
+        const alt = event.altKey;
+        const key = event.key;
+        // ---- Clipboard / history shortcuts --------------------------------------
+        if (mod && !shift && !alt) {
+            switch (key.toLowerCase()) {
+                case 'c':
+                    this.actions?.copy();
+                    return true;
+                case 'v':
+                    this.actions?.paste();
+                    return true;
+                case 'x':
+                    this.actions?.cut();
+                    return true;
+                case 'z':
+                    this.actions?.undo();
+                    return true;
+                case 'y':
+                    this.actions?.redo();
+                    return true;
+                case 'a':
+                    this.cellSelection.selectAll();
+                    return true;
+                case 'd':
+                    this.actions?.fillDown();
+                    return true;
+                case 'r':
+                    this.actions?.fillRight();
+                    return true;
+            }
+        }
+        if (mod && shift && !alt && key.toLowerCase() === 'z') {
+            this.actions?.redo();
+            return true;
+        }
+        // ---- Whole row / column selection ---------------------------------------
+        if (key === ' ') {
+            if (mod && shift) {
+                this.cellSelection.selectAll();
+                return true;
             }
-            case 'F2': {
-                event.preventDefault();
-                const col2 = this.state.visibleColumns()[focused.col];
-                if (col2) {
-                    const def2 = this.state.columnDefMap().get(col2.field);
-                    if (def2?.editable) {
-                        this.inlineEdit.startEdit(focused.row, col2.field);
-                    }
-                }
-                break;
+            if (mod) {
+                this.cellSelection.selectColumn(focused.col);
+                return true;
             }
-            case 'Escape':
-                event.preventDefault();
-                this.cellSelection.clearFocus();
-                break;
+            if (shift) {
+                this.cellSelection.selectRow(focused.row);
+                return true;
+            }
+        }
+        // ---- Delete / Backspace: clear cells ------------------------------------
+        if (key === 'Delete' || key === 'Backspace') {
+            this.actions?.deleteRange();
+            return true;
+        }
+        // ---- Arrow keys ---------------------------------------------------------
+        if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
+            return this.handleArrow(key, { mod, shift });
+        }
+        // ---- Home / End / PageUp / PageDown -------------------------------------
+        if (key === 'Home') {
+            if (mod && shift)
+                this.cellSelection.extendRangeToGridStart();
+            else if (mod)
+                this.cellSelection.moveToGridStart();
+            else if (shift)
+                this.cellSelection.extendRangeToRowStart();
+            else
+                this.cellSelection.moveToRowStart();
+            return true;
+        }
+        if (key === 'End') {
+            if (mod && shift)
+                this.cellSelection.extendRangeToGridEnd();
+            else if (mod)
+                this.cellSelection.moveToGridEnd();
+            else if (shift)
+                this.cellSelection.extendRangeToRowEnd();
+            else
+                this.cellSelection.moveToRowEnd();
+            return true;
+        }
+        if (key === 'PageUp') {
+            if (shift)
+                this.cellSelection.extendRangeByPage('up');
+            else
+                this.cellSelection.movePage('up');
+            return true;
+        }
+        if (key === 'PageDown') {
+            if (shift)
+                this.cellSelection.extendRangeByPage('down');
+            else
+                this.cellSelection.movePage('down');
+            return true;
+        }
+        // ---- Tab / Enter / F2 / Escape ------------------------------------------
+        if (key === 'Tab') {
+            if (shift)
+                this.cellSelection.moveLeft();
+            else
+                this.cellSelection.moveRight();
+            return true;
+        }
+        if (key === 'Enter') {
+            const col = this.state.visibleColumns()[focused.col];
+            const def = col ? this.state.columnDefMap().get(col.field) : undefined;
+            if (def?.editable) {
+                this.actions?.startEdit(focused.row, focused.col);
+                return true;
+            }
+            if (shift)
+                this.cellSelection.moveUp();
+            else
+                this.cellSelection.moveDown();
+            return true;
+        }
+        if (key === 'F2') {
+            this.actions?.startEdit(focused.row, focused.col);
+            return true;
+        }
+        if (key === 'Escape') {
+            this.cellSelection.clearFocus();
+            return true;
+        }
+        // ---- Typing-to-edit -----------------------------------------------------
+        if (!mod && !alt && this.isPrintableKey(event)) {
+            this.actions?.startEdit(focused.row, focused.col, key);
+            return true;
         }
+        return false;
     }
-    extendRangeBy(dRow, dCol) {
-        const range = this.state.cellRange();
-        const focused = this.state.focusedCell();
-        if (!focused)
-            return;
-        const pageStart = this.state.pageIndex() * this.state.pageSize();
-        const pageEnd = pageStart + Math.max(0, this.state.visibleRowCount() - 1);
-        const maxCol = this.state.visibleColumns().length - 1;
-        if (range) {
-            const newEnd = {
-                row: Math.max(pageStart, Math.min(pageEnd, range.end.row + dRow)),
-                col: Math.max(0, Math.min(maxCol, range.end.col + dCol)),
-            };
-            this.state.cellRange.set({ start: range.start, end: newEnd });
+    handleArrow(key, mods) {
+        const dir = key === 'ArrowUp' ? 'up' : key === 'ArrowDown' ? 'down' : key === 'ArrowLeft' ? 'left' : 'right';
+        if (mods.mod && mods.shift) {
+            this.cellSelection.extendRangeJumpToEdge(dir);
+            return true;
         }
-        else {
-            const end = {
-                row: Math.max(pageStart, Math.min(pageEnd, focused.row + dRow)),
-                col: Math.max(0, Math.min(maxCol, focused.col + dCol)),
-            };
-            this.state.cellRange.set({ start: focused, end });
+        if (mods.mod) {
+            this.cellSelection.jumpToEdge(dir);
+            return true;
+        }
+        if (mods.shift) {
+            const dRow = dir === 'up' ? -1 : dir === 'down' ? 1 : 0;
+            const dCol = dir === 'left' ? -1 : dir === 'right' ? 1 : 0;
+            this.cellSelection.extendRangeBy(dRow, dCol);
+            return true;
+        }
+        switch (dir) {
+            case 'up':
+                this.cellSelection.moveUp();
+                break;
+            case 'down':
+                this.cellSelection.moveDown();
+                break;
+            case 'left':
+                this.cellSelection.moveLeft();
+                break;
+            case 'right':
+                this.cellSelection.moveRight();
+                break;
         }
+        return true;
+    }
+    /**
+     * A key press is "printable" when it represents exactly one character that
+     * the user intends as input — excluding named keys like F1, Home, Arrow*,
+     * etc. Also excludes IME composition events (event.isComposing).
+     */
+    isPrintableKey(event) {
+        if (event.isComposing)
+            return false;
+        if (event.key.length !== 1)
+            return false;
+        // Guard against NUL / control characters slipping through on some layouts.
+        const code = event.key.charCodeAt(0);
+        return code >= 32 && code !== 127;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeyboardEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeyboardEngine });
@@ -7779,6 +8668,7 @@ class MozGridCellComponent {
     inlineEdit = inject(InlineEditEngine);
     cellSelectionEngine = inject(CellSelectionEngine);
     validationEngine = inject(CellValidationEngine);
+    clipboard = inject(ClipboardEngine);
     elRef = inject((ElementRef));
     preEditWidth = null;
     constructor() {
@@ -7893,6 +8783,7 @@ class MozGridCellComponent {
     isInFillRejectRange = computed(() => {
         return this.cellSelectionEngine.isCellInFillRejectRange(this.rowIndex(), this.colIndex());
     }, ...(ngDevMode ? [{ debugName: "isInFillRejectRange" }] : /* istanbul ignore next */ []));
+    cutEdges = computed(() => this.clipboard.cutEdges(this.rowIndex(), this.colIndex()), ...(ngDevMode ? [{ debugName: "cutEdges" }] : /* istanbul ignore next */ []));
     cellError = computed(() => this.validationEngine.getCellError(this.rowIndex(), this.def().field), ...(ngDevMode ? [{ debugName: "cellError" }] : /* istanbul ignore next */ []));
     onCellClick(event) {
         // Shift+click: extend range from current focused cell to this cell
@@ -7997,7 +8888,7 @@ class MozGridCellComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()", "style.overflow": "isFocused() && !isEditing() ? \"visible\" : \"hidden\"" } }, ngImport: i0, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()", "style.overflow": "isFocused() && !isEditing() ? \"visible\" : \"hidden\"" } }, ngImport: i0, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--cut]=\"cutEdges().any\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (cutEdges(); as edges) { @if (edges.top) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n  } @if (edges.bottom) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n  } @if (edges.left) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n  } @if (edges.right) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, decorators: [{
             type: Component,
@@ -8014,7 +8905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[style.width.px]': 'isLast() ? undefined : colState().currentWidth',
                         '[style.min-width.px]': 'isLast() ? colState().currentWidth : resolvedMinWidth()',
                         '[style.overflow]': 'isFocused() && !isEditing() ? "visible" : "hidden"',
-                    }, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"] }]
+                    }, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--cut]=\"cutEdges().any\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (cutEdges(); as edges) { @if (edges.top) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n  } @if (edges.bottom) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n  } @if (edges.left) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n  } @if (edges.right) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], colState: [{ type: i0.Input, args: [{ isSignal: true, alias: "colState", required: true }] }], def: [{ type: i0.Input, args: [{ isSignal: true, alias: "def", required: true }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], pinnedEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedEnd", required: false }] }], commitEdit: [{ type: i0.Output, args: ["commitEdit"] }], cancelEdit: [{ type: i0.Output, args: ["cancelEdit"] }] } });
 
 class MozGridRowComponent {
@@ -8519,6 +9410,8 @@ class MozGridComponent {
     rowSelectionEngine = inject(RowSelectionEngine);
     cellSelectionEngine = inject(CellSelectionEngine);
     keyboardEngine = inject(KeyboardEngine);
+    clipboardEngine = inject(ClipboardEngine);
+    historyEngine = inject(HistoryEngine);
     groupEngine = inject(GroupEngine);
     filterEngine = inject(FilterEngine);
     persistenceEngine = inject(StatePersistenceEngine);
@@ -8596,6 +9489,22 @@ class MozGridComponent {
     stateRestored = false;
     documentMouseUpHandler = null;
     constructor() {
+        this.keyboardEngine.registerActions({
+            copy: () => this.onBulkCopy(),
+            paste: () => { void this.onBulkPaste(); },
+            cut: () => this.onCutShortcut(),
+            deleteRange: () => this.onBulkDelete(),
+            undo: () => this.onUndo(),
+            redo: () => this.onRedo(),
+            fillDown: () => this.onFillDownShortcut(),
+            fillRight: () => this.onFillRightShortcut(),
+            startEdit: (row, col, char) => this.onStartEditShortcut(row, col, char),
+        });
+        // Bind history persistence to the grid's stateKey (same key we use for
+        // column/sort persistence — one localStorage namespace per grid).
+        effect(() => {
+            this.historyEngine.attach(this.stateKey());
+        });
         // Global mouseup listener for fill handle — if the user drags the fill
         // handle outside the grid and releases, we still need to end the fill.
         afterNextRender(() => {
@@ -8631,6 +9540,7 @@ class MozGridComponent {
                 const pushScroll = () => {
                     this.ngZone.run(() => {
                         this.horizontalVirtualScrollEngine.onScroll(scrollEl.scrollLeft, scrollEl.clientWidth);
+                        this.state.scrollViewportHeight.set(scrollEl.clientHeight);
                     });
                 };
                 // Prime the engine with the initial viewport width so the range is
@@ -8907,64 +9817,152 @@ class MozGridComponent {
         if (tag === 'input' || tag === 'select' || tag === 'textarea') {
             return;
         }
-        // Bulk action shortcuts work for both cell and row selection modes
+        // Row-selection mode forwards a small set of shortcuts without touching
+        // cell focus. Cell-mode (and anywhere else) goes through the keyboard engine.
         const selMode = this.state.activeSelectionMode();
-        if (selMode === 'rows' || selMode === 'cells') {
-            if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
+        if (selMode === 'rows') {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
                 event.preventDefault();
                 this.onBulkCopy();
                 return;
             }
-            if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
                 event.preventDefault();
-                this.onBulkPaste();
+                void this.onBulkPaste();
                 return;
             }
             if (event.key === 'Delete' || event.key === 'Backspace') {
-                if (selMode === 'rows' || this.state.cellRange() || this.state.focusedCell()) {
-                    event.preventDefault();
-                    this.onBulkDelete();
-                    return;
-                }
+                event.preventDefault();
+                this.onBulkDelete();
+                return;
             }
         }
         this.keyboardEngine.handleKeydown(event);
     }
     handleEditModeKeydown(event) {
-        switch (event.key) {
-            case 'Escape': {
-                event.preventDefault();
-                const cancelEvt = this.inlineEditEngine.cancelEdit();
-                if (cancelEvt) {
-                    this.cellEditCancel.emit(cancelEvt);
-                }
-                break;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            const cancelEvt = this.inlineEditEngine.cancelEdit();
+            if (cancelEvt) {
+                this.cellEditCancel.emit(cancelEvt);
             }
-            case 'Enter': {
-                event.preventDefault();
-                const commitEvt = this.inlineEditEngine.commitEdit();
-                if (commitEvt) {
-                    this.cellEdit.emit(commitEvt);
+            return;
+        }
+        if (event.key === 'Enter') {
+            // Alt+Enter: insert a newline in the draft for text editors (Excel-style).
+            if (event.altKey) {
+                const editState = this.state.cellEditState();
+                const def = this.state.columnDefMap().get(this.state.visibleColumns()[editState.editingCell?.col ?? -1]?.field ?? '');
+                const editorType = def?.cellEditor ?? 'text';
+                if (editorType === 'text') {
+                    event.preventDefault();
+                    const draft = editState.draftValue;
+                    const next = (typeof draft === 'string' ? draft : String(draft ?? '')) + '\n';
+                    this.inlineEditEngine.updateDraft(next);
                 }
-                this.cellSelectionEngine.moveRight();
-                this.refocusGrid();
-                break;
+                return;
             }
-            case 'Tab': {
+            // Ctrl+Enter: commit current draft and broadcast it to the active range.
+            if (event.ctrlKey || event.metaKey) {
                 event.preventDefault();
-                const tabEvt = this.inlineEditEngine.commitEdit();
-                if (tabEvt) {
-                    this.cellEdit.emit(tabEvt);
-                }
-                if (event.shiftKey) {
-                    this.cellSelectionEngine.moveLeft();
-                }
-                else {
-                    this.cellSelectionEngine.moveRight();
+                const editState = this.state.cellEditState();
+                const value = editState.draftValue;
+                const cancel = this.inlineEditEngine.cancelEdit();
+                if (cancel)
+                    this.cellEditCancel.emit(cancel);
+                const range = this.cellSelectionEngine.getNormalizedRange();
+                if (range) {
+                    const changes = this.clipboardEngine.fillSelection(range, value);
+                    this.historyEngine.record('fill-selection', changes);
                 }
                 this.refocusGrid();
-                break;
+                return;
             }
+            event.preventDefault();
+            this.commitFromEditMode();
+            if (event.shiftKey)
+                this.cellSelectionEngine.moveUp();
+            else
+                this.cellSelectionEngine.moveDown();
+            this.refocusGrid();
+            return;
+        }
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            this.commitFromEditMode();
+            if (event.shiftKey)
+                this.cellSelectionEngine.moveLeft();
+            else
+                this.cellSelectionEngine.moveRight();
+            this.refocusGrid();
+        }
+    }
+    commitFromEditMode() {
+        const evt = this.inlineEditEngine.commitEdit();
+        if (!evt)
+            return;
+        this.cellEdit.emit(evt);
+        this.clipboardEngine.clearCut();
+    }
+    onCutShortcut() {
+        const range = this.cellSelectionEngine.getNormalizedRange();
+        if (!range)
+            return;
+        const values = this.clipboardEngine.extractTsv(range);
+        const tsv = values.map((row) => row.join('\t')).join('\n');
+        navigator.clipboard.writeText(tsv);
+        this.clipboardEngine.markCut(range);
+        this.bulkCopy.emit({
+            range,
+            data: values,
+            rowIds: this.getRangeRowIds(range),
+            fields: this.getRangeFields(range),
+        });
+    }
+    onUndo() {
+        this.historyEngine.undo();
+        this.clipboardEngine.clearCut();
+    }
+    onRedo() {
+        this.historyEngine.redo();
+        this.clipboardEngine.clearCut();
+    }
+    onFillDownShortcut() {
+        const range = this.cellSelectionEngine.getNormalizedRange();
+        if (!range)
+            return;
+        if (this.state.mode() !== 'client')
+            return;
+        const changes = this.clipboardEngine.fillDown(range);
+        if (changes.length === 0)
+            return;
+        this.historyEngine.record('fill-down', changes);
+        this.clipboardEngine.clearCut();
+    }
+    onFillRightShortcut() {
+        const range = this.cellSelectionEngine.getNormalizedRange();
+        if (!range)
+            return;
+        if (this.state.mode() !== 'client')
+            return;
+        const changes = this.clipboardEngine.fillRight(range);
+        if (changes.length === 0)
+            return;
+        this.historyEngine.record('fill-right', changes);
+        this.clipboardEngine.clearCut();
+    }
+    onStartEditShortcut(row, col, initialChar) {
+        const colDef = this.state.visibleColumns()[col];
+        if (!colDef)
+            return;
+        const def = this.state.columnDefMap().get(colDef.field);
+        if (!def?.editable)
+            return;
+        if (initialChar !== undefined) {
+            this.inlineEditEngine.startEditWithChar(row, colDef.field, initialChar);
+        }
+        else {
+            this.inlineEditEngine.startEdit(row, colDef.field);
         }
     }
     resetInfiniteScrollIfActive() {
@@ -9051,17 +10049,26 @@ class MozGridComponent {
                 if (srcIdx >= 0)
                     indexMap.set(r, srcIdx);
             }
+            const changes = [];
             this.state.sourceData.update((d) => {
                 const updated = [...d];
                 for (const [, srcIdx] of indexMap) {
                     if (!updated[srcIdx])
                         continue;
+                    const before = updated[srcIdx][field];
+                    if (before === sourceValue)
+                        continue;
                     const rowCopy = { ...updated[srcIdx] };
                     rowCopy[field] = sourceValue;
                     updated[srcIdx] = rowCopy;
+                    changes.push({ rowIndex: srcIdx, field, before, after: sourceValue });
                 }
                 return updated;
             });
+            if (changes.length > 0) {
+                this.historyEngine.record('fill', changes);
+            }
+            this.clipboardEngine.clearCut();
         }
         this.fillDown.emit({
             sourceCell: anchor,
@@ -9102,6 +10109,7 @@ class MozGridComponent {
         if (targetFields.length === 0)
             return;
         if (this.state.mode() === 'client') {
+            const changes = [];
             this.state.sourceData.update((d) => {
                 const updated = [...d];
                 const src = updated[anchorSourceIdx];
@@ -9109,11 +10117,19 @@ class MozGridComponent {
                     return updated;
                 const rowCopy = { ...src };
                 for (const f of targetFields) {
+                    const before = src[f];
+                    if (before === sourceValue)
+                        continue;
                     rowCopy[f] = sourceValue;
+                    changes.push({ rowIndex: anchorSourceIdx, field: f, before, after: sourceValue });
                 }
                 updated[anchorSourceIdx] = rowCopy;
                 return updated;
             });
+            if (changes.length > 0) {
+                this.historyEngine.record('fill', changes);
+            }
+            this.clipboardEngine.clearCut();
         }
         this.fillDown.emit({
             sourceCell: anchor,
@@ -9320,6 +10336,8 @@ class MozGridComponent {
         });
     }
     onBulkCopy() {
+        // A fresh copy always cancels any pending cut (Excel parity).
+        this.clipboardEngine.clearCut();
         if (this.state.activeSelectionMode() === 'rows') {
             const event = this.rowSelectionEngine.getSelectionEvent();
             const rowData = this.extractRowSelectionData(event.selectedRows);
@@ -9387,7 +10405,16 @@ class MozGridComponent {
                 },
             };
             if (this.state.mode() === 'client') {
-                this.applyPasteData(pasteRange, rows);
+                // If a cut is pending, first wipe the source cells so cut+paste == move,
+                // and fold both halves into a single undoable history op.
+                const cutSource = this.state.cutSource();
+                const clearChanges = cutSource ? this.clipboardEngine.clearRange(cutSource) : [];
+                const pasteChanges = this.clipboardEngine.applyPaste(pasteRange, rows);
+                const allChanges = [...clearChanges, ...pasteChanges];
+                if (allChanges.length > 0) {
+                    this.historyEngine.record(cutSource ? 'cut' : 'paste', allChanges);
+                }
+                this.clipboardEngine.clearCut();
             }
             this.bulkPaste.emit({
                 range: pasteRange,
@@ -9449,33 +10476,14 @@ class MozGridComponent {
         const pageEnd = pageStart + this.gridEngine.paginatedData().length - 1;
         if (range.start.row < pageStart || range.end.row > pageEnd)
             return;
-        const cols = this.state.visibleColumns();
         const rows = range.end.row - range.start.row + 1;
         const colCount = range.end.col - range.start.col + 1;
         if (this.state.mode() === 'client') {
-            this.state.sourceData.update((data) => {
-                const updated = [...data];
-                for (let r = range.start.row; r <= range.end.row; r++) {
-                    if (!updated[r])
-                        continue;
-                    const rowCopy = { ...updated[r] };
-                    let changed = false;
-                    for (let c = range.start.col; c <= range.end.col; c++) {
-                        const field = cols[c]?.field;
-                        if (!field)
-                            continue;
-                        const coerced = this.coerceAndValidate(field, null, updated[r]);
-                        if (coerced !== PASTE_SKIP) {
-                            rowCopy[field] = coerced;
-                            changed = true;
-                        }
-                    }
-                    if (changed) {
-                        updated[r] = rowCopy;
-                    }
-                }
-                return updated;
-            });
+            const changes = this.clipboardEngine.clearRange(range);
+            if (changes.length > 0) {
+                this.historyEngine.record('delete', changes);
+            }
+            this.clipboardEngine.clearCut();
         }
         this.bulkDelete.emit({
             range,
@@ -9513,36 +10521,6 @@ class MozGridComponent {
         }
         return { range, values };
     }
-    applyPasteData(range, pasteRows) {
-        const cols = this.state.visibleColumns();
-        this.state.sourceData.update((data) => {
-            const updated = [...data];
-            for (let ri = 0; ri < pasteRows.length; ri++) {
-                const targetRow = range.start.row + ri;
-                if (targetRow >= updated.length)
-                    break;
-                const rowCopy = { ...updated[targetRow] };
-                let changed = false;
-                for (let ci = 0; ci < pasteRows[ri].length; ci++) {
-                    const targetCol = range.start.col + ci;
-                    if (targetCol >= cols.length)
-                        break;
-                    const field = cols[targetCol]?.field;
-                    if (!field)
-                        continue;
-                    const coerced = this.coerceAndValidate(field, pasteRows[ri][ci], updated[targetRow]);
-                    if (coerced !== PASTE_SKIP) {
-                        rowCopy[field] = coerced;
-                        changed = true;
-                    }
-                }
-                if (changed) {
-                    updated[targetRow] = rowCopy;
-                }
-            }
-            return updated;
-        });
-    }
     extractRowSelectionData(selectedRows) {
         const cols = this.state.visibleColumns();
         const defMap = this.state.columnDefMap();
@@ -9679,6 +10657,8 @@ class MozGridComponent {
             RowSelectionEngine,
             CellSelectionEngine,
             KeyboardEngine,
+            ClipboardEngine,
+            HistoryEngine,
             GroupEngine,
             FilterEngine,
             ColumnReorderEngine,
@@ -9925,6 +10905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         RowSelectionEngine,
                         CellSelectionEngine,
                         KeyboardEngine,
+                        ClipboardEngine,
+                        HistoryEngine,
                         GroupEngine,
                         FilterEngine,
                         ColumnReorderEngine,