@affino/datagrid-vue-app 0.1.1 → 0.1.2

package/dist/host/DataGridDefaultRenderer.js

@@ -1,1847 +0,0 @@
-import { computed, defineComponent, h, nextTick, onBeforeUnmount, ref, watch, } from "vue";
-import { cloneDataGridFilterSnapshot, useDataGridContextMenu, useDataGridAppAdvancedFilterBuilder, useDataGridAppColumnLayoutPanel, } from "@affino/datagrid-vue";
-import { useDataGridContextMenuActionRouter, useDataGridContextMenuAnchor, useDataGridViewportContextMenuRouter, } from "@affino/datagrid-vue/advanced";
-import DataGridAdvancedFilterPopover from "../overlays/DataGridAdvancedFilterPopover.vue";
-import DataGridAggregationsPopover from "../overlays/DataGridAggregationsPopover.vue";
-import DataGridColumnLayoutPopover from "../overlays/DataGridColumnLayoutPopover.vue";
-import DataGridModuleHost, {} from "./DataGridModuleHost";
-import DataGridGanttStage from "../gantt/DataGridGanttStage.vue";
-import DataGridTableStage from "../stage/DataGridTableStage.vue";
-import { resolveDataGridColumnMenuActionOptions, resolveDataGridColumnMenuDisabledItems, resolveDataGridColumnMenuDisabledReasons, resolveDataGridColumnMenuLabels, resolveDataGridColumnMenuItems, } from "../overlays/dataGridColumnMenu";
-import { resolveDataGridCellMenuActionOptions, resolveDataGridCellMenuDisabledItems, resolveDataGridCellMenuDisabledReasons, resolveDataGridCellMenuItems, resolveDataGridRowIndexMenuActionOptions, resolveDataGridRowIndexMenuDisabledItems, resolveDataGridRowIndexMenuDisabledReasons, resolveDataGridRowIndexMenuItems, } from "../overlays/dataGridContextMenu";
-import { normalizeDataGridGanttOptions, } from "../gantt/dataGridGantt";
-import { useDataGridTableStageRuntime } from "../stage/useDataGridTableStageRuntime";
-function normalizeBaseRowHeight(value) {
-    if (!Number.isFinite(value)) {
-        return 31;
-    }
-    return Math.max(24, Math.trunc(value));
-}
-function escapeCssAttributeValue(value) {
-    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
-        return CSS.escape(value);
-    }
-    return value.replace(/\\/g, "\\\\").replace(/\"/g, '\\"');
-}
-function resolveInitialSortState(sortModel) {
-    return (sortModel ?? []).map(entry => ({
-        key: entry.key,
-        direction: entry.direction,
-    }));
-}
-function createEmptyFilterModel() {
-    return {
-        columnFilters: {},
-        advancedFilters: {},
-        advancedExpression: null,
-    };
-}
-function cloneFilterModelState(filterModel) {
-    return cloneDataGridFilterSnapshot(filterModel ?? createEmptyFilterModel()) ?? createEmptyFilterModel();
-}
-function normalizeColumnMenuToken(token) {
-    return token.startsWith("string:")
-        ? `string:${token.slice("string:".length).toLowerCase()}`
-        : token;
-}
-function pruneFilterModel(filterModel) {
-    const columnFilters = {};
-    for (const [columnKey, entry] of Object.entries(filterModel.columnFilters ?? {})) {
-        if (entry.kind === "valueSet") {
-            const tokens = Array.from(new Set((entry.tokens ?? [])
-                .map(token => normalizeColumnMenuToken(String(token ?? "")))
-                .filter(token => token.length > 0)));
-            if (tokens.length === 0) {
-                continue;
-            }
-            columnFilters[columnKey] = {
-                kind: "valueSet",
-                tokens,
-            };
-            continue;
-        }
-        columnFilters[columnKey] = {
-            kind: "predicate",
-            operator: entry.operator,
-            value: entry.value,
-            value2: entry.value2,
-            caseSensitive: entry.caseSensitive,
-        };
-    }
-    const advancedFilters = { ...(filterModel.advancedFilters ?? {}) };
-    const advancedExpression = filterModel.advancedExpression ?? null;
-    if (Object.keys(columnFilters).length === 0
-        && Object.keys(advancedFilters).length === 0
-        && !advancedExpression) {
-        return null;
-    }
-    return {
-        columnFilters,
-        advancedFilters,
-        advancedExpression,
-    };
-}
-function resolveInitialFilterTexts(filterModel) {
-    const result = {};
-    const columnFilters = filterModel?.columnFilters ?? {};
-    for (const [columnKey, filter] of Object.entries(columnFilters)) {
-        if (filter?.kind === "predicate" && typeof filter.value === "string") {
-            result[columnKey] = filter.value;
-        }
-    }
-    return result;
-}
-function cloneRowData(row) {
-    if (typeof globalThis.structuredClone === "function") {
-        try {
-            return globalThis.structuredClone(row);
-        }
-        catch {
-            // Fall back to a plain-data clone when rows carry live references such as Window.
-        }
-    }
-    return cloneRowDataFallback(row, new WeakMap());
-}
-function cloneRowDataFallback(row, seen) {
-    if (row == null || typeof row !== "object") {
-        return row;
-    }
-    if (row instanceof Date) {
-        return new Date(row.getTime());
-    }
-    if (Array.isArray(row)) {
-        if (seen.has(row)) {
-            return seen.get(row);
-        }
-        const cloned = [];
-        seen.set(row, cloned);
-        for (const value of row) {
-            cloned.push(cloneRowDataFallback(value, seen));
-        }
-        return cloned;
-    }
-    if (isPlainRowObject(row)) {
-        if (seen.has(row)) {
-            return seen.get(row);
-        }
-        const cloned = {};
-        seen.set(row, cloned);
-        for (const [key, value] of Object.entries(row)) {
-            cloned[key] = cloneRowDataFallback(value, seen);
-        }
-        return cloned;
-    }
-    if (row && typeof row === "object") {
-        return { ...row };
-    }
-    return row;
-}
-function isPlainRowObject(value) {
-    if (!value || typeof value !== "object") {
-        return false;
-    }
-    const prototype = Object.getPrototypeOf(value);
-    return prototype === Object.prototype || prototype === null;
-}
-function serializeRowClipboardRows(rows) {
-    const seen = new WeakSet();
-    try {
-        return JSON.stringify(rows, (_key, value) => {
-            if (value == null || typeof value !== "object") {
-                return value;
-            }
-            if (value instanceof Date) {
-                return value.toISOString();
-            }
-            if (Array.isArray(value) || isPlainRowObject(value)) {
-                if (seen.has(value)) {
-                    return undefined;
-                }
-                seen.add(value);
-                return value;
-            }
-            return undefined;
-        });
-    }
-    catch {
-        return null;
-    }
-}
-function cloneAggregationModelState(model) {
-    if (!model) {
-        return null;
-    }
-    return {
-        columns: model.columns.map(column => ({ ...column })),
-        basis: model.basis === "source" ? "source" : "filtered",
-    };
-}
-function cloneGroupBySpec(groupBy) {
-    if (!groupBy) {
-        return null;
-    }
-    return {
-        fields: [...groupBy.fields],
-        expandedByDefault: groupBy.expandedByDefault,
-    };
-}
-function formatFilterDisplayValue(value) {
-    if (value == null) {
-        return "blank";
-    }
-    if (value instanceof Date) {
-        return value.toISOString();
-    }
-    if (typeof value === "string") {
-        return `"${value}"`;
-    }
-    return String(value);
-}
-function formatColumnFilterOperator(operator) {
-    switch (operator) {
-        case "contains":
-            return "contains";
-        case "startsWith":
-        case "starts-with":
-            return "starts with";
-        case "endsWith":
-        case "ends-with":
-            return "ends with";
-        case "equals":
-            return "=";
-        case "notEquals":
-        case "not-equals":
-            return "!=";
-        case "gt":
-            return ">";
-        case "gte":
-            return ">=";
-        case "lt":
-            return "<";
-        case "lte":
-            return "<=";
-        case "between":
-            return "between";
-        case "isEmpty":
-        case "is-empty":
-            return "is empty";
-        case "notEmpty":
-        case "not-empty":
-            return "is not empty";
-        case "isNull":
-        case "is-null":
-            return "is null";
-        case "notNull":
-        case "not-null":
-            return "is not null";
-        default:
-            return operator;
-    }
-}
-function decodeColumnFilterToken(token) {
-    const normalized = String(token ?? "");
-    if (normalized === "null") {
-        return "(Blanks)";
-    }
-    const separatorIndex = normalized.indexOf(":");
-    if (separatorIndex < 0) {
-        return normalized;
-    }
-    const kind = normalized.slice(0, separatorIndex);
-    const payload = normalized.slice(separatorIndex + 1);
-    if (kind === "string"
-        || kind === "number"
-        || kind === "boolean"
-        || kind === "bigint"
-        || kind === "date"
-        || kind === "repr"
-        || kind === "json") {
-        return payload;
-    }
-    return normalized;
-}
-function formatColumnFilterSummary(label, filter) {
-    if (filter.kind === "valueSet") {
-        if (filter.tokens.length === 1) {
-            return `${label}: ${decodeColumnFilterToken(filter.tokens[0] ?? "")}`;
-        }
-        return `${label}: ${filter.tokens.length} values`;
-    }
-    if (filter.operator === "between") {
-        return `${label} between ${formatFilterDisplayValue(filter.value)} and ${formatFilterDisplayValue(filter.value2)}`;
-    }
-    if (filter.operator === "isEmpty"
-        || filter.operator === "notEmpty"
-        || filter.operator === "isNull"
-        || filter.operator === "notNull") {
-        return `${label} ${formatColumnFilterOperator(filter.operator)}`;
-    }
-    return `${label} ${formatColumnFilterOperator(filter.operator)} ${formatFilterDisplayValue(filter.value)}`;
-}
-function formatLegacyAdvancedFilterSummary(label, filter) {
-    const parts = filter.clauses
-        .map((clause, clauseIndex) => {
-        const prefix = clauseIndex === 0 ? "" : `${String(clause.join ?? "and").toUpperCase()} `;
-        if (clause.operator === "between") {
-            return `${prefix}${formatColumnFilterOperator(clause.operator)} ${formatFilterDisplayValue(clause.value)} and ${formatFilterDisplayValue(clause.value2)}`;
-        }
-        if (clause.operator === "isEmpty"
-            || clause.operator === "notEmpty"
-            || clause.operator === "isNull"
-            || clause.operator === "notNull") {
-            return `${prefix}${formatColumnFilterOperator(clause.operator)}`;
-        }
-        return `${prefix}${formatColumnFilterOperator(clause.operator)} ${formatFilterDisplayValue(clause.value)}`;
-    })
-        .filter(part => part.length > 0);
-    if (parts.length === 0) {
-        return `${label}: active`;
-    }
-    return `${label} ${parts.join(" ")}`;
-}
-function formatAdvancedExpressionSummary(expression, resolveColumnLabel) {
-    if (expression.kind === "condition") {
-        const label = resolveColumnLabel(expression.key);
-        if (expression.operator === "between") {
-            return `${label} between ${formatFilterDisplayValue(expression.value)} and ${formatFilterDisplayValue(expression.value2)}`;
-        }
-        if (expression.operator === "isEmpty"
-            || expression.operator === "notEmpty"
-            || expression.operator === "isNull"
-            || expression.operator === "notNull") {
-            return `${label} ${formatColumnFilterOperator(expression.operator)}`;
-        }
-        return `${label} ${formatColumnFilterOperator(expression.operator)} ${formatFilterDisplayValue(expression.value)}`;
-    }
-    if (expression.kind === "not") {
-        return `NOT (${formatAdvancedExpressionSummary(expression.child, resolveColumnLabel)})`;
-    }
-    return expression.children
-        .map(child => formatAdvancedExpressionSummary(child, resolveColumnLabel))
-        .filter(part => part.length > 0)
-        .join(` ${expression.operator.toUpperCase()} `);
-}
-const NUMERIC_AGG_OPS = [
-    "sum",
-    "avg",
-    "min",
-    "max",
-    "count",
-    "countNonNull",
-    "first",
-    "last",
-];
-const ORDERED_AGG_OPS = [
-    "min",
-    "max",
-    "count",
-    "countNonNull",
-    "first",
-    "last",
-];
-const BASIC_AGG_OPS = [
-    "count",
-    "countNonNull",
-    "first",
-    "last",
-];
-function resolveAllowedAggregationOps(dataType) {
-    if (dataType === "number" || dataType === "currency" || dataType === "percent") {
-        return NUMERIC_AGG_OPS;
-    }
-    if (dataType === "date" || dataType === "datetime") {
-        return ORDERED_AGG_OPS;
-    }
-    return BASIC_AGG_OPS;
-}
-const CELL_MENU_ACTION_IDS_BY_ITEM = {
-    clipboard: ["cut", "copy", "paste"],
-    edit: ["clear"],
-};
-const ROW_INDEX_MENU_ACTION_IDS_BY_ITEM = {
-    insert: ["insert-row-above", "insert-row-below"],
-    clipboard: ["cut-row", "copy-row", "paste-row"],
-    selection: ["delete-selected-rows"],
-};
-const DEFAULT_CONTEXT_MENU_ACTION_LABELS = {
-    cut: "Cut",
-    copy: "Copy",
-    paste: "Paste",
-    clear: "Clear values",
-    "insert-row-above": "Insert above",
-    "insert-row-below": "Insert below",
-    "copy-row": "Copy row",
-    "paste-row": "Paste row",
-    "cut-row": "Cut row",
-    "delete-selected-rows": "Delete selected rows",
-    "sort-asc": "Sort ascending",
-    "sort-desc": "Sort descending",
-    "sort-clear": "Clear sort",
-    filter: "Filter column",
-    "auto-size": "Auto size column",
-};
-const ROW_INDEX_MENU_SHORTCUT_HINTS = {
-    "insert-row-above": "Insert / Ctrl/Cmd+I",
-    "copy-row": "Ctrl/Cmd+C",
-    "paste-row": "Ctrl/Cmd+V",
-    "cut-row": "Ctrl/Cmd+X",
-};
-export default defineComponent({
-    name: "DataGridDefaultRenderer",
-    props: {
-        mode: {
-            type: String,
-            required: true,
-        },
-        rows: {
-            type: Array,
-            default: () => [],
-        },
-        runtime: {
-            type: Object,
-            required: true,
-        },
-        runtimeRowModel: {
-            type: Object,
-            required: true,
-        },
-        selectionSnapshot: {
-            type: Object,
-            required: true,
-        },
-        selectionAnchor: {
-            type: Object,
-            required: true,
-        },
-        rowSelectionSnapshot: {
-            type: Object,
-            required: true,
-        },
-        syncSelectionSnapshotFromRuntime: {
-            type: Function,
-            required: true,
-        },
-        syncRowSelectionSnapshotFromRuntime: {
-            type: Function,
-            default: () => undefined,
-        },
-        sortModel: {
-            type: Array,
-            default: undefined,
-        },
-        filterModel: {
-            type: Object,
-            default: undefined,
-        },
-        groupBy: {
-            type: Object,
-            default: undefined,
-        },
-        pivotModel: {
-            type: Object,
-            default: undefined,
-        },
-        renderMode: {
-            type: String,
-            default: "virtualization",
-        },
-        virtualization: {
-            type: Object,
-            required: true,
-        },
-        columnMenu: {
-            type: Object,
-            required: true,
-        },
-        cellMenu: {
-            type: Object,
-            required: true,
-        },
-        rowIndexMenu: {
-            type: Object,
-            required: true,
-        },
-        columnLayout: {
-            type: Object,
-            required: true,
-        },
-        aggregations: {
-            type: Object,
-            required: true,
-        },
-        advancedFilter: {
-            type: Object,
-            required: true,
-        },
-        rowHeightMode: {
-            type: String,
-            default: "fixed",
-        },
-        baseRowHeight: {
-            type: Number,
-            default: 31,
-        },
-        rowHover: {
-            type: Boolean,
-            default: false,
-        },
-        stripedRows: {
-            type: Boolean,
-            default: false,
-        },
-        showRowIndex: {
-            type: Boolean,
-            default: true,
-        },
-        rowSelection: {
-            type: Boolean,
-            default: true,
-        },
-        isCellEditable: {
-            type: Function,
-            default: undefined,
-        },
-        viewMode: {
-            type: String,
-            default: "table",
-        },
-        gantt: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        toolbarModules: {
-            type: Array,
-            default: () => [],
-        },
-        inspectorPanel: {
-            type: Object,
-            default: null,
-        },
-    },
-    setup(props) {
-        const rowVersion = ref(0);
-        const sortState = ref(resolveInitialSortState(props.sortModel));
-        const filterModelState = ref(cloneFilterModelState(props.filterModel));
-        const columnFilterTextByKey = computed(() => (resolveInitialFilterTexts(filterModelState.value)));
-        let lastRowModelVersionKey = "";
-        const resolveRowModelVersionKey = () => {
-            const snapshot = props.runtimeRowModel.getSnapshot();
-            return [
-                snapshot.kind,
-                snapshot.revision ?? "",
-                snapshot.rowCount,
-                snapshot.loading ? 1 : 0,
-                snapshot.projection?.recomputeVersion ?? snapshot.projection?.version ?? "",
-            ].join("|");
-        };
-        lastRowModelVersionKey = resolveRowModelVersionKey();
-        const unsubscribeRowModel = props.runtimeRowModel.subscribe(() => {
-            const nextVersionKey = resolveRowModelVersionKey();
-            if (nextVersionKey === lastRowModelVersionKey) {
-                return;
-            }
-            lastRowModelVersionKey = nextVersionKey;
-            rowVersion.value += 1;
-        });
-        onBeforeUnmount(() => {
-            unsubscribeRowModel();
-        });
-        watch(() => props.sortModel, nextSortModel => {
-            sortState.value = resolveInitialSortState(nextSortModel);
-        }, { deep: true });
-        watch(() => props.filterModel, nextFilterModel => {
-            filterModelState.value = cloneFilterModelState(nextFilterModel);
-        }, { deep: true });
-        const modeRef = computed(() => props.mode);
-        const rowsRef = computed(() => props.rows);
-        const totalRuntimeRows = computed(() => {
-            void rowVersion.value;
-            return props.runtime.api.rows.getSnapshot().rowCount;
-        });
-        const visibleColumns = computed(() => props.runtime.columnSnapshot.value.visibleColumns);
-        const allColumns = computed(() => props.runtime.columnSnapshot.value.columns ?? []);
-        const advancedFilterColumns = computed(() => {
-            return visibleColumns.value
-                .filter(column => column.visible !== false)
-                .map(column => ({
-                key: column.key,
-                label: column.column.label ?? column.key,
-            }));
-        });
-        const columnLayoutDraftColumns = computed(() => {
-            return allColumns.value.map(column => ({
-                key: column.key,
-                label: column.column.label ?? column.key,
-                visible: column.visible !== false,
-            }));
-        });
-        const aggregatableColumns = computed(() => {
-            return allColumns.value
-                .filter(column => column.column.capabilities?.aggregatable === true)
-                .map(column => ({
-                key: column.key,
-                label: column.column.label ?? column.key,
-                allowedOps: resolveAllowedAggregationOps(column.column.dataType),
-            }));
-        });
-        const rowHeightMode = ref(props.rowHeightMode);
-        const normalizedBaseRowHeight = computed(() => normalizeBaseRowHeight(props.baseRowHeight));
-        const resolvedGanttOptions = computed(() => normalizeDataGridGanttOptions(props.gantt));
-        const firstColumnKey = computed(() => visibleColumns.value[0]?.key ?? "name");
-        const columnLabelByKey = computed(() => {
-            const map = new Map();
-            for (const column of allColumns.value) {
-                map.set(column.key, column.column.label ?? column.key);
-            }
-            return map;
-        });
-        const { isColumnLayoutPanelOpen, columnLayoutPanelItems, openColumnLayoutPanel, cancelColumnLayoutPanel, applyColumnLayoutPanel, moveColumnUp, moveColumnDown, updateColumnVisibility, } = useDataGridAppColumnLayoutPanel({
-            resolveColumns: () => columnLayoutDraftColumns.value,
-            applyColumnLayout: payload => {
-                props.runtime.api.columns.setOrder(payload.order);
-                for (const [columnKey, visible] of Object.entries(payload.visibilityByKey)) {
-                    props.runtime.api.columns.setVisibility(columnKey, visible);
-                }
-            },
-        });
-        const { isAdvancedFilterPanelOpen, advancedFilterDraftClauses, appliedAdvancedFilterExpression, openAdvancedFilterPanel, addAdvancedFilterClause, removeAdvancedFilterClause, updateAdvancedFilterClause, cancelAdvancedFilterPanel, applyAdvancedFilterPanel, clearAdvancedFilterPanel, } = useDataGridAppAdvancedFilterBuilder({
-            resolveColumns: () => advancedFilterColumns.value,
-        });
-        const isAggregationsPanelOpen = ref(false);
-        const aggregationDraftModel = ref(null);
-        const aggregationGroupingEnabled = computed(() => Boolean(props.groupBy?.fields?.length));
-        const currentAggregationModel = computed(() => {
-            void rowVersion.value;
-            return cloneAggregationModelState(props.runtime.api.rows.getAggregationModel());
-        });
-        const currentGroupBy = computed(() => {
-            void rowVersion.value;
-            return cloneGroupBySpec(props.runtime.api.rows.getSnapshot().groupBy);
-        });
-        const aggregationPanelItems = computed(() => {
-            const enabledByKey = new Map((aggregationDraftModel.value?.columns ?? []).map(column => [column.key, column.op]));
-            return aggregatableColumns.value.map(column => {
-                const firstAllowedOp = column.allowedOps[0] ?? "count";
-                const currentOp = enabledByKey.get(column.key);
-                const normalizedOp = currentOp && column.allowedOps.includes(currentOp) ? currentOp : firstAllowedOp;
-                return {
-                    key: column.key,
-                    label: column.label,
-                    enabled: enabledByKey.has(column.key),
-                    op: normalizedOp,
-                    allowedOps: column.allowedOps,
-                };
-            });
-        });
-        const aggregationBasis = computed(() => {
-            return aggregationDraftModel.value?.basis === "source" ? "source" : "filtered";
-        });
-        watch(currentAggregationModel, nextModel => {
-            if (isAggregationsPanelOpen.value) {
-                return;
-            }
-            aggregationDraftModel.value = cloneAggregationModelState(nextModel);
-        }, { immediate: true, deep: true });
-        watch(() => props.rowHeightMode, nextMode => {
-            rowHeightMode.value = nextMode;
-        });
-        const isColumnFilterActive = (columnKey) => {
-            const entry = filterModelState.value.columnFilters?.[columnKey];
-            if (!entry) {
-                return false;
-            }
-            return entry.kind === "valueSet"
-                ? entry.tokens.length > 0
-                : true;
-        };
-        const resolveCurrentValueFilterTokens = (columnKey) => {
-            const entry = filterModelState.value.columnFilters?.[columnKey];
-            if (!entry || entry.kind !== "valueSet") {
-                return [];
-            }
-            return entry.tokens.map(token => normalizeColumnMenuToken(String(token ?? "")));
-        };
-        const resolveColumnMenuItems = (columnKey) => {
-            return resolveDataGridColumnMenuItems(props.columnMenu, columnKey);
-        };
-        const resolveColumnMenuDisabledItems = (columnKey) => {
-            return resolveDataGridColumnMenuDisabledItems(props.columnMenu, columnKey);
-        };
-        const resolveColumnMenuDisabledReasons = (columnKey) => {
-            return resolveDataGridColumnMenuDisabledReasons(props.columnMenu, columnKey);
-        };
-        const resolveColumnMenuLabels = (columnKey) => {
-            return resolveDataGridColumnMenuLabels(props.columnMenu, columnKey);
-        };
-        const resolveColumnMenuActionOptions = (columnKey) => {
-            return resolveDataGridColumnMenuActionOptions(props.columnMenu, columnKey);
-        };
-        const resolveColumnGroupOrder = (columnKey) => {
-            const index = currentGroupBy.value?.fields.findIndex(field => field === columnKey) ?? -1;
-            return index >= 0 ? index : null;
-        };
-        const isColumnGrouped = (columnKey) => {
-            return resolveColumnGroupOrder(columnKey) !== null;
-        };
-        const applySortAndFilter = () => {
-            const nextSortModel = sortState.value.map(entry => ({
-                key: entry.key,
-                direction: entry.direction,
-            }));
-            const advancedExpression = props.advancedFilter.enabled
-                ? appliedAdvancedFilterExpression.value
-                : (filterModelState.value.advancedExpression ?? null);
-            props.runtime.api.rows.setSortAndFilterModel({
-                sortModel: nextSortModel,
-                filterModel: pruneFilterModel({
-                    ...filterModelState.value,
-                    advancedExpression,
-                }),
-            });
-        };
-        const effectiveAdvancedExpression = computed(() => {
-            if (props.advancedFilter.enabled) {
-                return appliedAdvancedFilterExpression.value ?? filterModelState.value.advancedExpression ?? null;
-            }
-            return filterModelState.value.advancedExpression ?? null;
-        });
-        const activeFilterSummaryItems = computed(() => {
-            const resolveColumnLabel = (columnKey) => columnLabelByKey.value.get(columnKey) ?? columnKey;
-            const items = [];
-            for (const [columnKey, entry] of Object.entries(filterModelState.value.columnFilters ?? {})) {
-                if (!entry) {
-                    continue;
-                }
-                items.push(formatColumnFilterSummary(resolveColumnLabel(columnKey), entry));
-            }
-            for (const [columnKey, entry] of Object.entries(filterModelState.value.advancedFilters ?? {})) {
-                if (!entry) {
-                    continue;
-                }
-                items.push(`Advanced: ${formatLegacyAdvancedFilterSummary(resolveColumnLabel(columnKey), entry)}`);
-            }
-            if (effectiveAdvancedExpression.value) {
-                items.push(`Advanced: ${formatAdvancedExpressionSummary(effectiveAdvancedExpression.value, resolveColumnLabel)}`);
-            }
-            return Object.freeze(items);
-        });
-        const hasActiveFilters = computed(() => activeFilterSummaryItems.value.length > 0);
-        const resetAllFilters = () => {
-            filterModelState.value = createEmptyFilterModel();
-            clearAdvancedFilterPanel();
-            applySortAndFilter();
-        };
-        watch(appliedAdvancedFilterExpression, () => {
-            if (!props.advancedFilter.enabled) {
-                return;
-            }
-            applySortAndFilter();
-        }, { deep: true });
-        const toggleSortForColumn = (columnKey, additive = false) => {
-            const currentIndex = sortState.value.findIndex(entry => entry.key === columnKey);
-            const current = currentIndex >= 0 ? sortState.value[currentIndex] : null;
-            if (!current) {
-                const nextEntry = { key: columnKey, direction: "asc" };
-                sortState.value = additive ? [...sortState.value, nextEntry] : [nextEntry];
-                applySortAndFilter();
-                return;
-            }
-            if (current.direction === "asc") {
-                const nextEntry = { key: columnKey, direction: "desc" };
-                if (additive) {
-                    sortState.value = sortState.value.map(entry => (entry.key === columnKey ? nextEntry : entry));
-                }
-                else {
-                    sortState.value = [nextEntry];
-                }
-                applySortAndFilter();
-                return;
-            }
-            sortState.value = additive
-                ? sortState.value.filter(entry => entry.key !== columnKey)
-                : [];
-            applySortAndFilter();
-        };
-        const sortIndicator = (columnKey) => {
-            const currentIndex = sortState.value.findIndex(entry => entry.key === columnKey);
-            if (currentIndex < 0) {
-                return "";
-            }
-            const current = sortState.value[currentIndex];
-            if (!current) {
-                return "";
-            }
-            const direction = current.direction === "asc" ? "↑" : "↓";
-            return sortState.value.length > 1 ? `${direction}${currentIndex + 1}` : direction;
-        };
-        const setColumnFilterText = (columnKey, value) => {
-            const nextFilterModel = cloneFilterModelState(filterModelState.value);
-            const normalizedValue = value.trim();
-            if (!normalizedValue) {
-                delete nextFilterModel.columnFilters[columnKey];
-            }
-            else {
-                nextFilterModel.columnFilters[columnKey] = {
-                    kind: "predicate",
-                    operator: "contains",
-                    value: normalizedValue,
-                    caseSensitive: false,
-                };
-            }
-            filterModelState.value = nextFilterModel;
-            applySortAndFilter();
-        };
-        const applyRowHeightSettings = () => {
-            props.runtime.api.view.setRowHeightMode(rowHeightMode.value);
-            props.runtime.api.view.setBaseRowHeight(normalizedBaseRowHeight.value);
-        };
-        const openAggregationsPanel = () => {
-            aggregationDraftModel.value = cloneAggregationModelState(currentAggregationModel.value);
-            isAggregationsPanelOpen.value = true;
-        };
-        const cancelAggregationsPanel = () => {
-            aggregationDraftModel.value = cloneAggregationModelState(currentAggregationModel.value);
-            isAggregationsPanelOpen.value = false;
-        };
-        watch(aggregationGroupingEnabled, enabled => {
-            if (enabled) {
-                return;
-            }
-            cancelAggregationsPanel();
-        }, { immediate: true });
-        const clearAggregationsPanel = () => {
-            aggregationDraftModel.value = null;
-        };
-        const updateAggregationBasis = (basis) => {
-            aggregationDraftModel.value = {
-                basis,
-                columns: aggregationDraftModel.value?.columns ?? [],
-            };
-        };
-        const toggleAggregationColumn = (key, enabled) => {
-            const column = aggregatableColumns.value.find(candidate => candidate.key === key);
-            if (!column) {
-                return;
-            }
-            const existingColumns = aggregationDraftModel.value?.columns ?? [];
-            if (!enabled) {
-                const nextColumns = existingColumns.filter(candidate => candidate.key !== key);
-                aggregationDraftModel.value = nextColumns.length > 0
-                    ? { basis: aggregationBasis.value, columns: nextColumns }
-                    : null;
-                return;
-            }
-            const existing = existingColumns.find(candidate => candidate.key === key);
-            const nextColumn = existing ?? {
-                key,
-                op: column.allowedOps[0] ?? "count",
-            };
-            aggregationDraftModel.value = {
-                basis: aggregationBasis.value,
-                columns: [
-                    ...existingColumns.filter(candidate => candidate.key !== key),
-                    nextColumn,
-                ],
-            };
-        };
-        const updateAggregationOp = (key, op) => {
-            const column = aggregatableColumns.value.find(candidate => candidate.key === key);
-            if (!column || !column.allowedOps.includes(op)) {
-                return;
-            }
-            const nextColumns = (aggregationDraftModel.value?.columns ?? []).map(candidate => {
-                if (candidate.key !== key) {
-                    return candidate;
-                }
-                return {
-                    ...candidate,
-                    op: op,
-                };
-            });
-            aggregationDraftModel.value = {
-                basis: aggregationBasis.value,
-                columns: nextColumns,
-            };
-        };
-        const applyAggregationsPanel = () => {
-            const nextModel = aggregationDraftModel.value && aggregationDraftModel.value.columns.length > 0
-                ? aggregationDraftModel.value
-                : null;
-            props.runtime.api.rows.setAggregationModel(nextModel);
-            aggregationDraftModel.value = cloneAggregationModelState(nextModel);
-            isAggregationsPanelOpen.value = false;
-        };
-        const resolveColumnMenuSortDirection = (columnKey) => {
-            return sortState.value.find(entry => entry.key === columnKey)?.direction ?? null;
-        };
-        const applyColumnMenuSort = (columnKey, direction) => {
-            const targetColumn = visibleColumns.value.find(column => column.key === columnKey);
-            if (!targetColumn || targetColumn.column.capabilities?.sortable === false) {
-                return;
-            }
-            sortState.value = direction === null
-                ? sortState.value.filter(entry => entry.key !== columnKey)
-                : [{ key: columnKey, direction }];
-            applySortAndFilter();
-        };
-        const applyColumnMenuPin = (columnKey, pin) => {
-            props.runtime.api.columns.setPin(columnKey, pin);
-        };
-        const applyColumnMenuGroupBy = (columnKey, grouped) => {
-            const current = currentGroupBy.value;
-            const nextFields = grouped
-                ? Array.from(new Set([...(current?.fields ?? []), columnKey]))
-                : (current?.fields ?? []).filter(field => field !== columnKey);
-            props.runtime.api.rows.setGroupBy(nextFields.length > 0
-                ? {
-                    fields: nextFields,
-                    expandedByDefault: current?.expandedByDefault ?? true,
-                }
-                : null);
-        };
-        const applyColumnMenuFilter = (columnKey, tokens) => {
-            const normalizedTokens = Array.from(new Set(tokens
-                .map(token => normalizeColumnMenuToken(String(token ?? "")))
-                .filter(token => token.length > 0)));
-            if (normalizedTokens.length === 0) {
-                clearColumnMenuFilter(columnKey);
-                return;
-            }
-            const nextFilterModel = cloneFilterModelState(filterModelState.value);
-            nextFilterModel.columnFilters[columnKey] = {
-                kind: "valueSet",
-                tokens: normalizedTokens,
-            };
-            filterModelState.value = nextFilterModel;
-            applySortAndFilter();
-        };
-        const clearColumnMenuFilter = (columnKey) => {
-            const nextFilterModel = cloneFilterModelState(filterModelState.value);
-            delete nextFilterModel.columnFilters[columnKey];
-            filterModelState.value = nextFilterModel;
-            applySortAndFilter();
-        };
-        const stageHostRef = ref(null);
-        const rowClipboardBuffer = ref(null);
-        let generatedRowIdentitySequence = 0;
-        const resolveCurrentSelectionRange = () => {
-            const snapshot = props.selectionSnapshot.value;
-            const range = snapshot?.ranges[snapshot.activeRangeIndex] ?? null;
-            if (!range) {
-                return null;
-            }
-            return {
-                startRow: range.startRow,
-                endRow: range.endRow,
-                startColumn: range.startCol,
-                endColumn: range.endCol,
-            };
-        };
-        const resolveCurrentCellCoord = () => {
-            const activeCell = props.selectionSnapshot.value?.activeCell;
-            if (!activeCell) {
-                return null;
-            }
-            return {
-                rowIndex: activeCell.rowIndex,
-                columnIndex: activeCell.colIndex,
-            };
-        };
-        const isMultiCellSelection = (range) => {
-            if (!range) {
-                return false;
-            }
-            return range.startRow !== range.endRow || range.startColumn !== range.endColumn;
-        };
-        const isCoordInsideRange = (coord, range) => {
-            return coord.rowIndex >= Math.min(range.startRow, range.endRow)
-                && coord.rowIndex <= Math.max(range.startRow, range.endRow)
-                && coord.columnIndex >= Math.min(range.startColumn, range.endColumn)
-                && coord.columnIndex <= Math.max(range.startColumn, range.endColumn);
-        };
-        const resolveCellCoordFromDataset = (rowId, columnKey) => {
-            const rowIndex = props.runtime.resolveBodyRowIndexById(rowId);
-            const columnIndex = visibleColumns.value.findIndex(column => column.key === columnKey);
-            if (rowIndex < 0 || columnIndex < 0) {
-                return null;
-            }
-            return { rowIndex, columnIndex };
-        };
-        const buildSingleCellSelectionSnapshot = (coord) => ({
-            ranges: [{
-                    startRow: coord.rowIndex,
-                    endRow: coord.rowIndex,
-                    startCol: coord.columnIndex,
-                    endCol: coord.columnIndex,
-                    anchor: {
-                        rowIndex: coord.rowIndex,
-                        colIndex: coord.columnIndex,
-                        rowId: props.runtime.getBodyRowAtIndex(coord.rowIndex)?.rowId ?? null,
-                    },
-                    focus: {
-                        rowIndex: coord.rowIndex,
-                        colIndex: coord.columnIndex,
-                        rowId: props.runtime.getBodyRowAtIndex(coord.rowIndex)?.rowId ?? null,
-                    },
-                    startRowId: props.runtime.getBodyRowAtIndex(coord.rowIndex)?.rowId ?? null,
-                    endRowId: props.runtime.getBodyRowAtIndex(coord.rowIndex)?.rowId ?? null,
-                }],
-            activeRangeIndex: 0,
-            activeCell: {
-                rowIndex: coord.rowIndex,
-                colIndex: coord.columnIndex,
-                rowId: props.runtime.getBodyRowAtIndex(coord.rowIndex)?.rowId ?? null,
-            },
-        });
-        const resolveRuntimeRowById = (rowId) => {
-            const rowCount = props.runtime.api.rows.getCount();
-            for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
-                const row = props.runtime.api.rows.get(rowIndex);
-                if (row && String(row.rowId) === rowId) {
-                    return row;
-                }
-            }
-            return null;
-        };
-        const writeClipboardText = async (payload) => {
-            try {
-                if (!globalThis.navigator?.clipboard?.writeText) {
-                    return false;
-                }
-                await globalThis.navigator.clipboard.writeText(payload);
-                return true;
-            }
-            catch {
-                return false;
-            }
-        };
-        const readClipboardText = async () => {
-            try {
-                if (!globalThis.navigator?.clipboard?.readText) {
-                    return "";
-                }
-                return await globalThis.navigator.clipboard.readText();
-            }
-            catch {
-                return "";
-            }
-        };
-        const readRowClipboardRows = async () => {
-            if (rowClipboardBuffer.value?.rows.length) {
-                return rowClipboardBuffer.value.rows.map(row => cloneRowData(row));
-            }
-            const payload = (await readClipboardText()).trim();
-            if (!payload) {
-                return null;
-            }
-            try {
-                const parsed = JSON.parse(payload);
-                if (Array.isArray(parsed)) {
-                    return parsed
-                        .filter((value) => Boolean(value) && typeof value === "object")
-                        .map(row => cloneRowData(row));
-                }
-                if (parsed && typeof parsed === "object") {
-                    return [cloneRowData(parsed)];
-                }
-            }
-            catch {
-                return null;
-            }
-            return null;
-        };
-        const setRowClipboardRows = async (rows, operation, sourceRowIds = []) => {
-            const clonedRows = rows.map(row => cloneRowData(row));
-            rowClipboardBuffer.value = {
-                rows: clonedRows,
-                operation,
-                sourceRowIds: sourceRowIds.map(rowId => String(rowId)),
-            };
-            const clipboardPayload = serializeRowClipboardRows(clonedRows);
-            if (clipboardPayload) {
-                await writeClipboardText(clipboardPayload);
-            }
-            return true;
-        };
-        const canInsertRows = () => props.runtime.api.rows.hasInsertSupport();
-        const canMutateRows = () => props.runtime.api.rows.hasDataMutationSupport();
-        const isStructuredSourceRowInput = (candidate) => {
-            if (!candidate || typeof candidate !== "object") {
-                return false;
-            }
-            return ("data" in candidate
-                || "row" in candidate
-                || "kind" in candidate
-                || "state" in candidate
-                || "sourceIndex" in candidate
-                || "originalIndex" in candidate
-                || "displayIndex" in candidate);
-        };
-        const resolveDataRowId = (candidate) => {
-            const candidateRecord = candidate;
-            if (candidateRecord.rowId != null) {
-                return String(candidateRecord.rowId);
-            }
-            if (candidateRecord.id != null) {
-                return String(candidateRecord.id);
-            }
-            return null;
-        };
-        const resolveSourceRowTemplateByRowId = (rowId) => {
-            for (const candidate of props.rows) {
-                if (!candidate || typeof candidate !== "object") {
-                    continue;
-                }
-                const record = candidate;
-                const candidateRowId = record.rowId != null
-                    ? String(record.rowId)
-                    : record.rowKey != null
-                        ? String(record.rowKey)
-                        : null;
-                if (candidateRowId === rowId && isStructuredSourceRowInput(record)) {
-                    return record;
-                }
-            }
-            for (const candidate of props.rows) {
-                if (!candidate || typeof candidate !== "object") {
-                    continue;
-                }
-                const record = candidate;
-                if (isStructuredSourceRowInput(record)) {
-                    return record;
-                }
-            }
-            return null;
-        };
-        const createGeneratedRowIdentity = () => {
-            generatedRowIdentitySequence += 1;
-            return `datagrid-row-${Date.now()}-${generatedRowIdentitySequence}`;
-        };
-        const cloneRawRowWithFreshIdentity = (row) => {
-            const cloned = cloneRowData(row);
-            const nextIdentity = createGeneratedRowIdentity();
-            let assignedIdentity = false;
-            if ("id" in cloned) {
-                cloned.id = nextIdentity;
-                assignedIdentity = true;
-            }
-            if ("rowId" in cloned) {
-                cloned.rowId = nextIdentity;
-                assignedIdentity = true;
-            }
-            if (!assignedIdentity) {
-                cloned.id = nextIdentity;
-            }
-            return cloned;
-        };
-        const buildBlankRawRowInput = (row) => {
-            const nextIdentity = createGeneratedRowIdentity();
-            const nextRow = {};
-            for (const [key, value] of Object.entries(row)) {
-                if (key === "id" || key === "rowId") {
-                    nextRow[key] = nextIdentity;
-                    continue;
-                }
-                nextRow[key] = typeof value === "number" ? null : "";
-            }
-            if (!("id" in nextRow) && !("rowId" in nextRow)) {
-                nextRow.id = nextIdentity;
-            }
-            return nextRow;
-        };
-        const buildStructuredRowInput = (row, template, mode) => {
-            const nextIdentity = createGeneratedRowIdentity();
-            const nextData = mode === "clone"
-                ? cloneRowData(row)
-                : Object.entries(row).reduce((result, [key, value]) => {
-                    result[key] = typeof value === "number" ? null : "";
-                    return result;
-                }, {});
-            if ("id" in nextData || !("rowId" in nextData) && !("id" in nextData)) {
-                nextData.id = nextIdentity;
-            }
-            if ("rowId" in nextData) {
-                nextData.rowId = nextIdentity;
-            }
-            if ("rowKey" in nextData) {
-                nextData.rowKey = nextIdentity;
-            }
-            const templateState = typeof template.state === "object" && template.state != null
-                ? template.state
-                : null;
-            return {
-                kind: template.kind === "group" ? "leaf" : (template.kind ?? "leaf"),
-                rowId: nextIdentity,
-                rowKey: nextIdentity,
-                state: {
-                    ...(templateState ?? {}),
-                    selected: false,
-                    group: false,
-                    pinned: "none",
-                    expanded: false,
-                },
-                data: nextData,
-                row: cloneRowData(nextData),
-            };
-        };
-        const cloneRowWithFreshIdentity = (row, template = null) => {
-            if (template && isStructuredSourceRowInput(template)) {
-                return buildStructuredRowInput(row, template, "clone");
-            }
-            return cloneRawRowWithFreshIdentity(row);
-        };
-        const buildInsertedRowInput = (row, template = null) => {
-            if (template && isStructuredSourceRowInput(template)) {
-                return buildStructuredRowInput(row, template, "blank");
-            }
-            return buildBlankRawRowInput(row);
-        };
-        const resolveSelectedRuntimeRowIds = (targetRowId) => {
-            const selectedRowIds = props.rowSelectionSnapshot.value?.selectedRows ?? [];
-            const normalizedSelected = selectedRowIds
-                .map(rowId => String(rowId))
-                .filter(rowId => rowId.length > 0 && resolveRuntimeRowById(rowId)?.kind !== "group");
-            if (normalizedSelected.length > 0) {
-                return normalizedSelected;
-            }
-            const selectionRange = resolveCurrentSelectionRange();
-            const lastVisibleColumnIndex = visibleColumns.value.length - 1;
-            if (selectionRange && lastVisibleColumnIndex >= 0) {
-                const startColumn = Math.min(selectionRange.startColumn, selectionRange.endColumn);
-                const endColumn = Math.max(selectionRange.startColumn, selectionRange.endColumn);
-                const startRow = Math.min(selectionRange.startRow, selectionRange.endRow);
-                const endRow = Math.max(selectionRange.startRow, selectionRange.endRow);
-                const targetRowIndex = targetRowId.length > 0 ? props.runtime.resolveBodyRowIndexById(targetRowId) : -1;
-                if (startColumn === 0
-                    && endColumn === lastVisibleColumnIndex
-                    && (targetRowIndex < 0 || (targetRowIndex >= startRow && targetRowIndex <= endRow))) {
-                    const rangedRowIds = [];
-                    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
-                        const row = props.runtime.getBodyRowAtIndex(rowIndex);
-                        if (!row || row.kind === "group" || row.rowId == null) {
-                            continue;
-                        }
-                        rangedRowIds.push(String(row.rowId));
-                    }
-                    if (rangedRowIds.length > 0) {
-                        return rangedRowIds;
-                    }
-                }
-            }
-            return targetRowId.length > 0 ? [targetRowId] : [];
-        };
-        const readCurrentRuntimeDataRows = () => {
-            const rows = [];
-            const rowCount = props.runtime.api.rows.getCount();
-            for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
-                const row = props.runtime.api.rows.get(rowIndex);
-                if (!row || row.kind === "group") {
-                    continue;
-                }
-                rows.push(row.data);
-            }
-            return rows;
-        };
-        const removeRuntimeRows = (rowIds) => {
-            if (!canMutateRows() || rowIds.length === 0) {
-                return false;
-            }
-            const rowIdSet = new Set(rowIds);
-            const nextRows = readCurrentRuntimeDataRows().filter(candidate => {
-                const normalized = resolveDataRowId(candidate);
-                return normalized == null || !rowIdSet.has(normalized);
-            });
-            if (nextRows.length === props.runtime.api.rows.getCount()) {
-                return false;
-            }
-            props.runtime.api.rows.replaceData(nextRows);
-            if (props.runtime.api.rowSelection.hasSupport()) {
-                props.runtime.api.rowSelection.clearSelectedRows();
-                props.syncRowSelectionSnapshotFromRuntime?.();
-            }
-            return true;
-        };
-        const moveRuntimeRowsAfter = (sourceRowIds, targetRowId) => {
-            if (!canMutateRows() || sourceRowIds.length === 0 || !targetRowId) {
-                return false;
-            }
-            const currentRows = readCurrentRuntimeDataRows();
-            const sourceRowIdSet = new Set(sourceRowIds.map(rowId => String(rowId)));
-            if (sourceRowIdSet.has(String(targetRowId))) {
-                return false;
-            }
-            const movedRows = currentRows.filter(candidate => {
-                const normalized = resolveDataRowId(candidate);
-                return normalized != null && sourceRowIdSet.has(normalized);
-            });
-            if (movedRows.length === 0) {
-                return false;
-            }
-            const remainingRows = currentRows.filter(candidate => {
-                const normalized = resolveDataRowId(candidate);
-                return normalized == null || !sourceRowIdSet.has(normalized);
-            });
-            const targetIndex = remainingRows.findIndex(candidate => resolveDataRowId(candidate) === targetRowId);
-            if (targetIndex < 0) {
-                return false;
-            }
-            props.runtime.api.rows.replaceData([
-                ...remainingRows.slice(0, targetIndex + 1),
-                ...movedRows,
-                ...remainingRows.slice(targetIndex + 1),
-            ]);
-            if (props.runtime.api.rowSelection.hasSupport()) {
-                props.runtime.api.rowSelection.selectRows(sourceRowIds);
-                props.syncRowSelectionSnapshotFromRuntime?.();
-            }
-            return true;
-        };
-        const clearPendingRowClipboardOperation = () => {
-            if (!rowClipboardBuffer.value) {
-                return false;
-            }
-            rowClipboardBuffer.value = null;
-            return true;
-        };
-        const isRowInPendingClipboardCut = (row) => {
-            if (row.kind === "group") {
-                return false;
-            }
-            const pending = rowClipboardBuffer.value;
-            if (!pending) {
-                return false;
-            }
-            return pending.sourceRowIds.includes(String(row.rowId));
-        };
-        let contextMenuVisible = () => false;
-        let closeRuntimeContextMenu = () => undefined;
-        let openRuntimeContextMenuFromCurrentCell = () => undefined;
-        let runRowIndexContextAction = async (_action, _rowId) => false;
-        const resolveRowIndexMenuLabel = (actionId, customLabel) => {
-            if (customLabel) {
-                return customLabel;
-            }
-            const label = DEFAULT_CONTEXT_MENU_ACTION_LABELS[actionId];
-            const shortcutHint = ROW_INDEX_MENU_SHORTCUT_HINTS[actionId];
-            return shortcutHint ? `${label} (${shortcutHint})` : label;
-        };
-        const { tableStageProps, tableStageContext, copySelectedCells, pasteSelectedCells, cutSelectedCells, clearSelectedCells, captureHistorySnapshot, recordHistoryIntentTransaction, } = useDataGridTableStageRuntime({
-            mode: modeRef,
-            rows: rowsRef,
-            sourceRows: rowsRef,
-            runtime: props.runtime,
-            rowVersion,
-            totalRuntimeRows,
-            visibleColumns,
-            rowRenderMode: computed(() => props.renderMode),
-            rowHeightMode,
-            normalizedBaseRowHeight,
-            selectionSnapshot: props.selectionSnapshot,
-            selectionAnchor: props.selectionAnchor,
-            rowSelectionSnapshot: props.rowSelectionSnapshot,
-            rowHover: computed(() => props.rowHover),
-            stripedRows: computed(() => props.stripedRows),
-            showRowIndex: computed(() => props.showRowIndex),
-            showRowSelection: computed(() => props.rowSelection),
-            isRowInPendingClipboardCut,
-            syncSelectionSnapshotFromRuntime: props.syncSelectionSnapshotFromRuntime,
-            syncRowSelectionSnapshotFromRuntime: props.syncRowSelectionSnapshotFromRuntime,
-            clearExternalPendingClipboardOperation: clearPendingRowClipboardOperation,
-            firstColumnKey,
-            columnFilterTextByKey,
-            virtualization: computed(() => props.virtualization),
-            toggleSortForColumn,
-            sortIndicator,
-            setColumnFilterText,
-            columnMenuEnabled: computed(() => props.columnMenu.enabled),
-            columnMenuMaxFilterValues: computed(() => props.columnMenu.maxFilterValues),
-            resolveColumnMenuItems,
-            resolveColumnMenuDisabledItems,
-            resolveColumnMenuDisabledReasons,
-            resolveColumnMenuLabels,
-            resolveColumnMenuActionOptions,
-            isColumnFilterActive,
-            isColumnGrouped,
-            resolveColumnGroupOrder,
-            resolveColumnMenuSortDirection,
-            resolveColumnMenuSelectedTokens: resolveCurrentValueFilterTokens,
-            applyColumnMenuSort,
-            applyColumnMenuPin,
-            applyColumnMenuGroupBy,
-            applyColumnMenuFilter,
-            clearColumnMenuFilter,
-            applyRowHeightSettings,
-            cloneRowData,
-            isCellEditable: props.isCellEditable,
-            isContextMenuVisible: () => contextMenuVisible(),
-            closeContextMenu: () => closeRuntimeContextMenu(),
-            openContextMenuFromCurrentCell: () => {
-                openRuntimeContextMenuFromCurrentCell();
-            },
-            runRowIndexKeyboardAction: (action, rowId) => runRowIndexContextAction(action, rowId),
-        });
-        const { contextMenu, contextMenuRef, contextMenuStyle, closeContextMenu, openContextMenu, onContextMenuKeyDown, } = useDataGridContextMenu();
-        contextMenuVisible = () => contextMenu.value.visible;
-        closeRuntimeContextMenu = closeContextMenu;
-        const viewportContextRouter = useDataGridViewportContextMenuRouter({
-            isInteractionBlocked: () => false,
-            isRangeMoveModifierActive: () => false,
-            resolveSelectionRange: resolveCurrentSelectionRange,
-            resolveCellCoordFromDataset,
-            applyCellSelection: (coord) => {
-                props.runtime.api.selection.setSnapshot(buildSingleCellSelectionSnapshot(coord));
-                props.syncSelectionSnapshotFromRuntime();
-            },
-            resolveActiveCellCoord: resolveCurrentCellCoord,
-            setActiveCellCoord: (coord) => {
-                props.runtime.api.selection.setSnapshot(buildSingleCellSelectionSnapshot(coord));
-                props.syncSelectionSnapshotFromRuntime();
-            },
-            cellCoordsEqual: (left, right) => left?.rowIndex === right?.rowIndex && left?.columnIndex === right?.columnIndex,
-            isMultiCellSelection,
-            isCoordInsideRange,
-            openContextMenu,
-            closeContextMenu,
-            isColumnContextEnabled: (columnKey) => {
-                if (!props.cellMenu.enabled) {
-                    return false;
-                }
-                return resolveDataGridCellMenuItems(props.cellMenu, columnKey).length > 0;
-            },
-            isRowIndexContextEnabled: () => props.rowIndexMenu.enabled && props.showRowIndex,
-        });
-        const contextMenuAnchor = useDataGridContextMenuAnchor({
-            resolveCurrentCellCoord,
-            resolveViewportElement: () => stageHostRef.value,
-            resolveRowAtIndex: (rowIndex) => props.runtime.getBodyRowAtIndex(rowIndex) ?? undefined,
-            resolveColumnAtIndex: (columnIndex) => visibleColumns.value[columnIndex] ?? undefined,
-            resolveSelectionRange: resolveCurrentSelectionRange,
-            isMultiCellSelection: (range) => isMultiCellSelection(range),
-            isCoordInsideRange,
-            openContextMenu,
-            isColumnContextEnabled: column => props.cellMenu.enabled && resolveDataGridCellMenuItems(props.cellMenu, column.key).length > 0,
-        });
-        openRuntimeContextMenuFromCurrentCell = () => {
-            contextMenuAnchor.openContextMenuFromCurrentCell();
-        };
-        const openRuntimeRowIndexContextMenu = (rowId) => {
-            if (!props.rowIndexMenu.enabled || !props.showRowIndex || !stageHostRef.value) {
-                return false;
-            }
-            const normalizedRowId = String(rowId);
-            const selector = `.datagrid-stage__row-index-cell[data-row-id="${escapeCssAttributeValue(normalizedRowId)}"]`;
-            const rowIndexCell = stageHostRef.value.querySelector(selector);
-            if (!rowIndexCell) {
-                return false;
-            }
-            const rect = rowIndexCell.getBoundingClientRect();
-            openContextMenu(rect.left + Math.max(10, Math.min(rect.width / 2, Math.max(10, rect.width - 10))), rect.bottom - 4, {
-                zone: "row-index",
-                rowId: normalizedRowId,
-            });
-            return true;
-        };
-        const recordRowMutation = (beforeSnapshot, label) => {
-            recordHistoryIntentTransaction({
-                intent: "edit",
-                label,
-            }, beforeSnapshot);
-        };
-        runRowIndexContextAction = async (action, rowId) => {
-            const normalizedRowId = String(rowId);
-            if (action === "open-row-menu") {
-                return openRuntimeRowIndexContextMenu(normalizedRowId);
-            }
-            const targetRow = resolveRuntimeRowById(normalizedRowId);
-            if (!targetRow || targetRow.kind === "group") {
-                return false;
-            }
-            if (action === "insert-row-above") {
-                if (!canInsertRows()) {
-                    return false;
-                }
-                const beforeSnapshot = captureHistorySnapshot();
-                const inserted = props.runtime.api.rows.insertDataBefore(rowId, [buildInsertedRowInput(targetRow.data, resolveSourceRowTemplateByRowId(normalizedRowId))]);
-                if (inserted) {
-                    recordRowMutation(beforeSnapshot, "Insert row above");
-                }
-                return inserted;
-            }
-            if (action === "insert-row-below") {
-                if (!canInsertRows()) {
-                    return false;
-                }
-                const beforeSnapshot = captureHistorySnapshot();
-                const inserted = props.runtime.api.rows.insertDataAfter(rowId, [buildInsertedRowInput(targetRow.data, resolveSourceRowTemplateByRowId(normalizedRowId))]);
-                if (inserted) {
-                    recordRowMutation(beforeSnapshot, "Insert row below");
-                }
-                return inserted;
-            }
-            if (action === "copy-row") {
-                return setRowClipboardRows([targetRow.data], "copy", [normalizedRowId]);
-            }
-            if (action === "cut-row") {
-                return setRowClipboardRows([targetRow.data], "cut", [normalizedRowId]);
-            }
-            if (action === "paste-row") {
-                if (!canInsertRows()) {
-                    return false;
-                }
-                const rows = await readRowClipboardRows();
-                if (!rows || rows.length === 0) {
-                    return false;
-                }
-                const beforeSnapshot = captureHistorySnapshot();
-                const pendingCutSourceRowIds = rowClipboardBuffer.value?.operation === "cut"
-                    ? rowClipboardBuffer.value.sourceRowIds
-                    : [];
-                const sourceRowTemplate = resolveSourceRowTemplateByRowId(pendingCutSourceRowIds[0] ?? normalizedRowId) ?? resolveSourceRowTemplateByRowId(normalizedRowId);
-                const inserted = pendingCutSourceRowIds.length > 0
-                    ? moveRuntimeRowsAfter(pendingCutSourceRowIds, normalizedRowId)
-                    : props.runtime.api.rows.insertDataAfter(rowId, rows.map(row => cloneRowWithFreshIdentity(row, sourceRowTemplate)));
-                if (inserted && rowClipboardBuffer.value?.operation === "cut") {
-                    rowClipboardBuffer.value = null;
-                }
-                if (inserted) {
-                    recordRowMutation(beforeSnapshot, pendingCutSourceRowIds.length > 0
-                        ? (pendingCutSourceRowIds.length > 1 ? `Move ${pendingCutSourceRowIds.length} rows` : "Move row")
-                        : (rows.length > 1 ? `Paste ${rows.length} rows` : "Paste row"));
-                }
-                return inserted;
-            }
-            if (action === "delete-selected-rows") {
-                const rowIds = resolveSelectedRuntimeRowIds(normalizedRowId);
-                if (rowIds.length === 0) {
-                    return false;
-                }
-                const beforeSnapshot = captureHistorySnapshot();
-                const removed = removeRuntimeRows(rowIds);
-                if (removed) {
-                    recordRowMutation(beforeSnapshot, rowIds.length > 1 ? `Delete ${rowIds.length} rows` : "Delete row");
-                }
-                return removed;
-            }
-            return false;
-        };
-        const contextMenuActionRouter = useDataGridContextMenuActionRouter({
-            resolveContextMenuState: () => ({
-                zone: contextMenu.value.zone,
-                columnKey: contextMenu.value.columnKey,
-                rowId: contextMenu.value.rowId,
-            }),
-            runHeaderContextAction: () => false,
-            runRowIndexContextAction,
-            copySelection: copySelectedCells,
-            pasteSelection: pasteSelectedCells,
-            cutSelection: cutSelectedCells,
-            clearCurrentSelection: clearSelectedCells,
-            closeContextMenu,
-        });
-        const menuActionEntries = computed(() => {
-            if (!contextMenu.value.visible) {
-                return [];
-            }
-            const zone = contextMenu.value.zone;
-            if (zone === "cell" || zone === "range") {
-                const columnKey = contextMenu.value.columnKey ?? "";
-                if (!props.cellMenu.enabled || !columnKey) {
-                    return [];
-                }
-                const items = resolveDataGridCellMenuItems(props.cellMenu, columnKey);
-                const disabledItems = new Set(resolveDataGridCellMenuDisabledItems(props.cellMenu, columnKey));
-                const disabledReasons = resolveDataGridCellMenuDisabledReasons(props.cellMenu, columnKey);
-                const actionOptions = resolveDataGridCellMenuActionOptions(props.cellMenu, columnKey);
-                return items.flatMap((item, itemIndex) => {
-                    const itemActions = CELL_MENU_ACTION_IDS_BY_ITEM[item] ?? [];
-                    return itemActions.flatMap(actionId => {
-                        const actionKey = actionId;
-                        const option = actionOptions[actionKey];
-                        if (option?.hidden) {
-                            return [];
-                        }
-                        const disabled = disabledItems.has(item) || option?.disabled === true;
-                        return [{
-                                id: actionId,
-                                label: option?.label ?? DEFAULT_CONTEXT_MENU_ACTION_LABELS[actionId],
-                                disabled,
-                                title: option?.disabledReason ?? disabledReasons[item],
-                                separatorBefore: itemIndex > 0 && actionId === itemActions[0],
-                            }];
-                    });
-                });
-            }
-            if (zone === "row-index") {
-                if (!props.rowIndexMenu.enabled) {
-                    return [];
-                }
-                const items = resolveDataGridRowIndexMenuItems(props.rowIndexMenu);
-                const disabledItems = new Set(resolveDataGridRowIndexMenuDisabledItems(props.rowIndexMenu));
-                const disabledReasons = resolveDataGridRowIndexMenuDisabledReasons(props.rowIndexMenu);
-                const actionOptions = resolveDataGridRowIndexMenuActionOptions(props.rowIndexMenu);
-                return items.flatMap((item, itemIndex) => {
-                    const itemActions = ROW_INDEX_MENU_ACTION_IDS_BY_ITEM[item] ?? [];
-                    return itemActions.flatMap(actionId => {
-                        const actionKey = actionId === "insert-row-above"
-                            ? "insertAbove"
-                            : actionId === "insert-row-below"
-                                ? "insertBelow"
-                                : actionId === "copy-row"
-                                    ? "copy"
-                                    : actionId === "paste-row"
-                                        ? "paste"
-                                        : actionId === "delete-selected-rows"
-                                            ? "deleteSelected"
-                                            : "cut";
-                        const option = actionOptions[actionKey];
-                        if (option?.hidden) {
-                            return [];
-                        }
-                        let disabled = disabledItems.has(item) || option?.disabled === true;
-                        let title = option?.disabledReason ?? disabledReasons[item];
-                        if ((actionId === "insert-row-above" || actionId === "insert-row-below" || actionId === "paste-row") && !canInsertRows()) {
-                            disabled = true;
-                            title = title ?? "Row insertion is not supported by the current row model";
-                        }
-                        if ((actionId === "cut-row" || actionId === "delete-selected-rows") && !canMutateRows()) {
-                            disabled = true;
-                            title = title ?? "Row deletion is not supported by the current row model";
-                        }
-                        if (actionId === "delete-selected-rows") {
-                            const effectiveRowIds = resolveSelectedRuntimeRowIds(contextMenu.value.rowId ?? "");
-                            if (effectiveRowIds.length === 0) {
-                                disabled = true;
-                                title = title ?? "No deletable rows are selected";
-                            }
-                        }
-                        return [{
-                                id: actionId,
-                                label: resolveRowIndexMenuLabel(actionId, option?.label),
-                                disabled,
-                                title,
-                                separatorBefore: itemIndex > 0 && actionId === itemActions[0],
-                            }];
-                    });
-                });
-            }
-            return [];
-        });
-        const handleViewportContextMenu = (event) => {
-            viewportContextRouter.dispatchViewportContextMenu(event);
-        };
-        const focusGridViewport = () => {
-            const viewport = stageHostRef.value?.querySelector(".grid-body-viewport");
-            viewport?.focus({ preventScroll: true });
-        };
-        const scheduleGridViewportFocus = () => {
-            void nextTick(() => {
-                if (typeof window !== "undefined") {
-                    window.requestAnimationFrame(() => {
-                        focusGridViewport();
-                    });
-                    return;
-                }
-                focusGridViewport();
-            });
-        };
-        const handleContextMenuAction = async (action) => {
-            const handled = await contextMenuActionRouter.runContextMenuAction(action);
-            if (handled) {
-                focusGridViewport();
-                closeContextMenu();
-                scheduleGridViewportFocus();
-            }
-        };
-        watch(() => contextMenu.value.visible, (visible, _previous, onCleanup) => {
-            if (!visible || typeof window === "undefined") {
-                return;
-            }
-            const handleWindowPointerDown = (event) => {
-                const target = event.target;
-                if (target && contextMenuRef.value?.contains(target)) {
-                    return;
-                }
-                closeContextMenu();
-            };
-            const handleWindowBlur = () => {
-                closeContextMenu();
-            };
-            window.addEventListener("mousedown", handleWindowPointerDown, true);
-            window.addEventListener("blur", handleWindowBlur);
-            onCleanup(() => {
-                window.removeEventListener("mousedown", handleWindowPointerDown, true);
-                window.removeEventListener("blur", handleWindowBlur);
-            });
-        });
-        const stageProps = computed(() => ({
-            ...tableStageProps.value,
-            columns: {
-                ...tableStageProps.value.columns,
-                columnMenuEnabled: props.columnMenu.enabled,
-                columnMenuMaxFilterValues: props.columnMenu.maxFilterValues,
-                resolveColumnMenuItems,
-                resolveColumnMenuDisabledItems,
-                resolveColumnMenuDisabledReasons,
-                resolveColumnMenuLabels,
-                resolveColumnMenuActionOptions,
-                isColumnFilterActive,
-                isColumnGrouped,
-                resolveColumnGroupOrder,
-                resolveColumnMenuSortDirection,
-                resolveColumnMenuSelectedTokens: resolveCurrentValueFilterTokens,
-                applyColumnMenuSort,
-                applyColumnMenuPin,
-                applyColumnMenuGroupBy,
-                applyColumnMenuFilter,
-                clearColumnMenuFilter,
-            },
-            rows: {
-                ...tableStageProps.value.rows,
-                sourceRows: props.rows,
-                rowHover: props.rowHover,
-                stripedRows: props.stripedRows,
-            },
-        }));
-        const toolbarModules = computed(() => {
-            const modules = [];
-            if (props.columnLayout.enabled) {
-                modules.push({
-                    key: "column-layout",
-                    component: DataGridColumnLayoutPopover,
-                    props: {
-                        isOpen: isColumnLayoutPanelOpen.value,
-                        items: columnLayoutPanelItems.value,
-                        buttonLabel: props.columnLayout.buttonLabel,
-                        active: false,
-                        onOpen: openColumnLayoutPanel,
-                        onToggleVisibility: updateColumnVisibility,
-                        onMoveUp: moveColumnUp,
-                        onMoveDown: moveColumnDown,
-                        onApply: applyColumnLayoutPanel,
-                        onCancel: cancelColumnLayoutPanel,
-                    },
-                });
-            }
-            if (props.advancedFilter.enabled) {
-                modules.push({
-                    key: "advanced-filter",
-                    component: DataGridAdvancedFilterPopover,
-                    props: {
-                        isOpen: isAdvancedFilterPanelOpen.value,
-                        clauses: advancedFilterDraftClauses.value,
-                        columns: advancedFilterColumns.value,
-                        appliedFilterSummaryItems: activeFilterSummaryItems.value,
-                        hasAnyFilters: hasActiveFilters.value,
-                        buttonLabel: props.advancedFilter.buttonLabel,
-                        active: hasActiveFilters.value,
-                        onOpen: openAdvancedFilterPanel,
-                        onAdd: addAdvancedFilterClause,
-                        onRemove: removeAdvancedFilterClause,
-                        onUpdateClause: updateAdvancedFilterClause,
-                        onApply: applyAdvancedFilterPanel,
-                        onCancel: cancelAdvancedFilterPanel,
-                        onResetAll: resetAllFilters,
-                    },
-                });
-            }
-            if (props.aggregations.enabled && props.mode !== "pivot") {
-                modules.push({
-                    key: "aggregations",
-                    component: DataGridAggregationsPopover,
-                    props: {
-                        isOpen: isAggregationsPanelOpen.value,
-                        basis: aggregationBasis.value,
-                        items: aggregationPanelItems.value,
-                        buttonLabel: props.aggregations.buttonLabel,
-                        active: aggregationGroupingEnabled.value && (isAggregationsPanelOpen.value || Boolean(currentAggregationModel.value?.columns.length)),
-                        disabled: !aggregationGroupingEnabled.value,
-                        disabledReason: aggregationGroupingEnabled.value
-                            ? ""
-                            : "Aggregations require an active group-by model.",
-                        onOpen: openAggregationsPanel,
-                        onUpdateBasis: updateAggregationBasis,
-                        onToggleColumn: toggleAggregationColumn,
-                        onUpdateOp: updateAggregationOp,
-                        onClear: clearAggregationsPanel,
-                        onApply: applyAggregationsPanel,
-                        onCancel: cancelAggregationsPanel,
-                    },
-                });
-            }
-            return [...modules, ...props.toolbarModules];
-        });
-        return () => h("div", {
-            class: "datagrid-app-layout",
-        }, [
-            h(DataGridModuleHost, {
-                modules: toolbarModules.value,
-            }),
-            h("div", {
-                class: "datagrid-app-workspace",
-            }, [
-                h("div", {
-                    class: "datagrid-app-stage",
-                    ref: stageHostRef,
-                }, [
-                    props.viewMode === "gantt"
-                        ? h(DataGridGanttStage, {
-                            stageContext: tableStageContext,
-                            runtime: props.runtime,
-                            gantt: resolvedGanttOptions.value,
-                            baseRowHeight: normalizedBaseRowHeight.value,
-                            rowVersion: rowVersion.value,
-                        })
-                        : h(DataGridTableStage, {
-                            ...stageProps.value,
-                            stageContext: tableStageContext,
-                            onViewportContextMenu: handleViewportContextMenu,
-                        }),
-                    contextMenu.value.visible && menuActionEntries.value.length > 0
-                        ? h("div", {
-                            ref: contextMenuRef,
-                            class: "datagrid-context-menu",
-                            style: contextMenuStyle.value,
-                            role: "menu",
-                            tabindex: -1,
-                            onKeydown: (event) => {
-                                onContextMenuKeyDown(event, {
-                                    onEscape: () => {
-                                        focusGridViewport();
-                                    },
-                                });
-                            },
-                        }, menuActionEntries.value.flatMap(entry => {
-                            const nodes = [];
-                            if (entry.separatorBefore) {
-                                nodes.push(h("div", {
-                                    class: "datagrid-context-menu__separator",
-                                    "aria-hidden": "true",
-                                }));
-                            }
-                            nodes.push(h("button", {
-                                type: "button",
-                                class: "datagrid-context-menu__item",
-                                "data-datagrid-menu-action": entry.id,
-                                disabled: entry.disabled,
-                                title: entry.title,
-                                onClick: () => {
-                                    void handleContextMenuAction(entry.id);
-                                },
-                            }, entry.label));
-                            return nodes;
-                        }))
-                        : null,
-                ]),
-                props.inspectorPanel
-                    ? h("aside", {
-                        class: "datagrid-app-inspector-shell",
-                    }, [
-                        h(props.inspectorPanel.component, {
-                            ...(props.inspectorPanel.props ?? {}),
-                        }),
-                    ])
-                    : null,
-            ]),
-        ]);
-    },
-});