feat(grid): enable canvas renderer by default

apps/desktop/src/i18n/locales/en.ts

@@ -441,7 +441,7 @@ export default {
     copyFailed: "Copy failed: {message}",
     domRenderMode: "DOM",
     canvasRenderMode: "Canvas",
-    renderModeHint: "Switch between the stable DOM grid and experimental Canvas rendering.",
+    renderModeHint: "Switch between Canvas rendering and the DOM fallback grid.",
     filter: "Filter",
     filterBuilder: "Filters",
     filterBuilderTitle: "Filters",

apps/desktop/src/i18n/locales/es.ts

@@ -434,7 +434,7 @@ export default {
     copyFailed: "Error al copiar: {message}",
     domRenderMode: "DOM",
     canvasRenderMode: "Canvas",
-    renderModeHint: "Alterna entre la cuadrícula DOM estable y el renderizado Canvas experimental.",
+    renderModeHint: "Alterna entre el renderizado Canvas y la cuadrícula DOM de respaldo.",
     filter: "Filtrar",
     filterBuilder: "Filtros",
     filterBuilderTitle: "Filtros",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -437,7 +437,7 @@ export default {
     copyFailed: "复制失败：{message}",
     domRenderMode: "DOM",
     canvasRenderMode: "Canvas",
-    renderModeHint: "在稳定 DOM 表格和实验性 Canvas 渲染之间切换。",
+    renderModeHint: "在 Canvas 渲染和 DOM 兜底表格之间切换。",
     filter: "筛选",
     filterBuilder: "筛选器",
     filterBuilderTitle: "筛选器",

apps/desktop/src/i18n/locales/zh-TW.ts

@@ -437,7 +437,7 @@ export default {
     copyFailed: "複製失敗：{message}",
     domRenderMode: "DOM",
     canvasRenderMode: "Canvas",
-    renderModeHint: "在穩定 DOM 表格和實驗性 Canvas 渲染之間切換。",
+    renderModeHint: "在 Canvas 渲染和 DOM 備援表格之間切換。",
     filter: "篩選",
     filterBuilder: "篩選器",
     filterBuilderTitle: "篩選器",

apps/desktop/src/lib/canvasDataGridRenderer.ts

@@ -280,9 +280,10 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
         const rowSelectionVisual = rowCellsUseSelectionVisual(item.id);
         const isSingleSelectedCell =
           singleSelectedCell?.rowIndex === item.displayIndex && singleSelectedCell.visibleColIdx === visibleColIdx;
-        const selectedFillVisual = rowSelectionVisual || (selectedCell && !isSingleSelectedCell);
-        const selectedBorderVisual = rowSelectionVisual || selectedCell;
         const isDirtyCell = item.isDirtyCol[actualColIdx];
+        const selectedFillVisual =
+          rowSelectionVisual || (selectedCell && !isSingleSelectedCell && (!rowIsActive || isDirtyCell));
+        const selectedBorderVisual = rowSelectionVisual || selectedCell;
         const isSearchMatch = paintSearchMatches && searchMatchKeys.has(`${item.displayIndex}:${actualColIdx}`);
         const isCurrentSearchMatch =
           paintSearchMatches &&
@@ -363,12 +364,10 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
           const selectedBottomY = y + CANVAS_DATA_GRID_ROW_HEIGHT - 1.5;
           ctx.strokeStyle = theme.cellSelectedBorder;
           ctx.beginPath();
-          if (!rowSelectionVisual) {
-            ctx.moveTo(selectedLeftX, selectedTopY);
-            ctx.lineTo(selectedRightX, selectedTopY);
-            ctx.moveTo(selectedLeftX, selectedBottomY);
-            ctx.lineTo(selectedRightX, selectedBottomY);
-          }
+          ctx.moveTo(selectedLeftX, selectedTopY);
+          ctx.lineTo(selectedRightX, selectedTopY);
+          ctx.moveTo(selectedLeftX, selectedBottomY);
+          ctx.lineTo(selectedRightX, selectedBottomY);
           ctx.moveTo(selectedLeftX, selectedTopY);
           ctx.lineTo(selectedLeftX, selectedBottomY);
           ctx.moveTo(selectedRightX, selectedTopY);

apps/desktop/src/lib/dataGridPaintTheme.ts

@@ -40,10 +40,22 @@ export function cssVarColor(getVar: (name: string) => string, name: string, fall
   return value.startsWith("#") || /^(rgb|hsl|oklch|oklab|lab|lch|color-mix)\(/.test(value) ? value : `hsl(${value})`;
 }
 
+function resolveCssVarReferences(value: string, getVar: (name: string) => string, depth = 0): string {
+  if (depth > 6 || !value.includes("var(")) return value;
+  return value.replace(/var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/g, (_match, name: string, fallback?: string) => {
+    const resolved = getVar(name).trim() || fallback?.trim() || "";
+    if (!resolved) return "";
+    const nested = resolveCssVarReferences(resolved, getVar, depth + 1);
+    return cssVarColor(() => nested, name, nested);
+  });
+}
+
 function paintToken(getVar: (name: string) => string, name: string, fallback: string): string {
-  const value = getVar(name).trim();
-  if (!value || value.includes("var(")) return fallback;
-  return cssVarColor(getVar, name, fallback);
+  const value = resolveCssVarReferences(getVar(name).trim(), getVar);
+  if (!value) return fallback;
+  return value.startsWith("#") || /^(rgb|hsl|oklch|oklab|lab|lch|color-mix)\(/.test(value)
+    ? value
+    : cssVarColor(() => value, name, fallback);
 }
 
 export function resolveDataGridPaintTheme(options: {

apps/desktop/src/stores/settingsStore.ts

@@ -255,7 +255,7 @@ export const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
   mongoViewMode: "document",
   showColumnCommentsInHeader: false,
   compactColumnHeaderActions: true,
-  dataGridRenderMode: "dom",
+  dataGridRenderMode: "canvas",
   structureEditorDensity: "compact",
   tableInfoDrawerWidth: 320,
   cellDetailDrawerWidth: 320,