diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..d2f459c
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,63 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+- Performance benchmark suite with `BenchmarkRunner`, `measureMultiRun`, `computeStats`, `measureThroughput` utilities
+- `npm run benchmark` script for running performance benchmarks
+- Baseline metrics for 6 categories across 1K/10K/100K row datasets
+- `TextMeasureCache.measureEmHeight()` for font em-height measurement
+- `TextMeasureCache.getWrappedLines()` for word-boundary text wrapping with character-level fallback
+- `TextMeasureCache.countWrappedLines()` and `measureWrappedHeight()` for wrapped text height computation
+- `ColumnDef.wrapText` option to enable word-wrap rendering per column
+- Multi-line wrapped text rendering in `CellTextLayer` when `wrapText` is enabled
+- E2E Playwright test for word-wrap visual verification (`tests/e2e/word-wrap.test.ts`)
+- `LINE_HEIGHT_MULTIPLIER` shared constant (1.2) for consistent line-height across text rendering
+- `RowStore` auto/manual height separation: `setAutoHeight()`, `setAutoHeightsBatch()`, `clearAutoHeight()`, `clearAllAutoHeights()`, `isManual()`, `isAuto()`
+- `LayoutEngine.setRowHeightsBatch()` for O(n) batch row height updates (vs O(n²) for individual calls)
+- `CellTypeRenderer.measureHeight()` optional method for custom cell type height measurement
+- `RenderLayer.measureHeights()` optional method for bulk row height measurement by render layers
+- `CellTextLayer.measureHeights()` implementation for measuring wrapped text row heights
+- `SpreadsheetEngine.setAutoRowHeights()` for batch auto-measured height updates with manual-always-wins priority
+- `AutoRowSizeManager` class: orchestrates automatic row height measurement with viewport-first sync strategy and off-screen async measurement via `requestIdleCallback`
+- `SpreadsheetEngineConfig.autoRowHeight` option to enable auto row height (`boolean` or `AutoRowSizeConfig` with `batchSize`, `minRowHeight`, `cellPadding`)
+- `SpreadsheetEngine.getAutoRowSizeManager()` accessor for the auto row size manager instance
+- `AutoRowSizeManager` dirty tracking: `markDirtyRows()`, `markAllDirty()`, `clearDirty()`, `hasDirtyRows`, `isRowDirty()`, `isAllDirty`, `dirtyRowCount`
+- `AutoRowSizeManager.startDirtyMeasurement()` for efficient re-measurement of only dirty rows
+- Scroll compensation in `setAutoRowHeights()`: adjusts scroll position when row heights change above viewport to prevent visual jumping
+- `SpreadsheetEngine.markAutoRowHeightDirty()` and `markAllAutoRowHeightDirty()` public API for triggering dirty re-measurement
+- Auto row height integration with `setCell()`: cell value changes mark the row dirty for re-measurement
+- Auto row height integration with column resize: resizing a wrap-enabled column triggers full re-measurement
+- `ColumnStretchManager` class: distributes available container width across columns with two modes ('all' and 'last')
+- `SpreadsheetEngineConfig.stretchColumns` option: `'all'` distributes extra space evenly among stretchable columns, `'last'` gives remaining space to the last visible column
+- `LayoutEngine.setColumnWidthsBatch()` for efficient batch column width updates (single recomputation pass)
+- Column stretch recalculation on container resize via existing `ResizeObserver`
+- Manual column resize exclusion: manually resized columns are excluded from stretch distribution in 'all' mode
+- Frozen column handling: frozen columns are excluded from stretch distribution
+- `DatePickerOverlay` class: pure-DOM calendar widget for date-type cell editing, positioned below target cell
+- `CellEditor` interface and `CellEditorRegistry` for extensible cell editing with type-based editor resolution
+- `DatePickerEditor` adapter wrapping `DatePickerOverlay` as a `CellEditor` implementation
+- `DateTimeEditor` class: combined date+time picker (calendar + hour/minute spin controls) for `datetime` columns, commits ISO `YYYY-MM-DDTHH:mm` format
+- `'datetime'` added to `CellType` union type
+- `dateTimePicker` section added to `SpreadsheetLocale` interface (hour, minute, now, ariaLabel) with EN and RU translations
+- Date picker opens on double-click, F2, or type-to-edit for columns with `type: 'date'`
+- Calendar month/year navigation, day grid with keyboard navigation (arrows, Enter, Escape, Tab)
+- Date selection commits value in YYYY-MM-DD format via command system (undo/redo supported)
+- Grid scroll and outside click close the date picker
+- Today button for quick date selection
+- ARIA attributes on date picker overlay (role=dialog, aria-label)
+- `ContextMenuItem.submenu` optional field for recursive nested submenus
+- Submenu chevron indicator (`▸`) on items with submenus
+- Submenu opens on hover (200ms delay) or ArrowRight key, closes on ArrowLeft or Escape
+- Nested submenus supported recursively to arbitrary depth
+- Empty menu prevention: parent items with all invisible submenu children are hidden
+- Keyboard navigation within submenus (ArrowUp/Down), Escape closes one level at a time
+- Interactive demo page with sidebar layout showcasing all library features
+- Demo sidebar sections: Display (theme, stretch, auto row height), Data (1M rows, progressive load, streaming), Views (grouping, pivot), Import/Export (Excel, print), Collaboration
+- Demo feature badges showing active engine configuration
+- Demo context menu items with Insert and Format submenus for submenu showcase
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 68da451..37485ae 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -18,6 +18,7 @@ npm run typecheck    # TypeScript check
 npm run lint         # ESLint
 npm run test         # Unit tests (vitest)
 npm run test:e2e     # E2E tests (playwright)
+npm run benchmark    # Performance benchmarks (6 metrics × 3 datasets)
 ```
 
 ## Project Structure
diff --git a/README.md b/README.md
index 984ff3d..5c64275 100644
--- a/README.md
+++ b/README.md
@@ -27,11 +27,13 @@ Official wrappers for **React**, **Vue 3**, and **Angular**. Embeddable widget b
 
 | Category | Features |
 |----------|----------|
-| **Rendering** | Canvas 2D multi-layer pipeline, 100K+ rows at 60fps, progressive loading |
-| **Editing** | Inline editor, undo/redo (100 steps), clipboard (TSV + HTML), autofill |
-| **Data** | Sort (multi-column), filter (14 operators), frozen panes, merged cells |
-| **Plugins** | Formulas, conditional formatting, collaboration (OT), Excel I/O, context menu |
+| **Rendering** | Canvas 2D multi-layer pipeline, 100K+ rows at 60fps, progressive loading, auto row height with text wrapping |
+| **Editing** | Inline editor, date picker, datetime picker, custom cell editors via CellEditorRegistry, undo/redo (100 steps), clipboard (TSV + HTML), autofill |
+| **Layout** | Column stretch (`'all'` / `'last'`), frozen panes, auto row sizing, container resize observation |
+| **Data** | Sort (multi-column), filter (14 operators), merged cells |
+| **Plugins** | Formulas, conditional formatting, collaboration (OT), Excel I/O, context menu with submenus |
 | **Theming** | Light/dark built-in, fully customizable via `WitTheme` |
+| **Localization** | Built-in English and Russian locales, custom locale packs, runtime switching |
 | **Accessibility** | WCAG 2.1 AA: role=grid, aria-live, keyboard-only, print support |
 | **Frameworks** | React, Vue 3, Angular, vanilla JS widget (<36KB gzip) |
 
@@ -96,6 +98,48 @@ Full documentation with interactive demos at **[spreadsheet.witqq.dev](https://s
 - [API Reference](https://spreadsheet.witqq.dev/api/wit-engine/) — WitEngine, types, cell types
 - [Migration from Handsontable](https://spreadsheet.witqq.dev/guides/migration-from-handsontable/) — Side-by-side API mapping
 
+## 🌐 Localization
+
+Built-in English and Russian locale packs. Create custom locales for any language:
+
+```tsx
+import { WitTable } from '@witqq/spreadsheet-react';
+import { ruLocale } from '@witqq/spreadsheet';
+
+<WitTable columns={columns} data={data} locale={ruLocale} />
+```
+
+Custom partial locales are merged over English defaults:
+
+```ts
+import { resolveLocale } from '@witqq/spreadsheet';
+
+const myLocale = resolveLocale({
+  contextMenu: { cut: 'Cortar', copy: 'Copiar', paste: 'Pegar' },
+  formatLocale: 'es-ES',
+});
+```
+
+Locale covers: context menu labels, date picker, filter panel, accessibility announcements, aggregate labels, print notices, and number/date formatting.
+
+## 🔌 Custom Cell Editors
+
+Register custom overlay editors for specific column types via `CellEditorRegistry`:
+
+```ts
+import type { CellEditor } from '@witqq/spreadsheet';
+
+class ColorPickerEditor implements CellEditor {
+  readonly id = 'color-picker';
+  // ... implement open(), close(), setTheme(), setLocale(), destroy()
+}
+
+const engine = new SpreadsheetEngine({ columns, data });
+engine.registerCellEditor(new ColorPickerEditor(), 'color');
+```
+
+Built-in editors: `DatePickerEditor` (registered for `type: 'date'`), `DateTimeEditor` (registered for `type: 'datetime'` — calendar + hour/minute controls, commits ISO `YYYY-MM-DDTHH:mm`), `InlineEditor` (textarea fallback). The registry resolves editors by priority — higher priority wins when multiple editors match.
+
 ## 🛠 Development
 
 ```bash
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
new file mode 100644
index 0000000..73db203
--- /dev/null
+++ b/docs/ARCHITECTURE.md
@@ -0,0 +1,688 @@
+# Architecture
+
+## Overview
+
+`@witqq/spreadsheet` is a canvas-based spreadsheet engine. It renders everything on a single `<canvas>` element using a layered rendering pipeline. The engine is framework-agnostic — framework wrappers (React, Vue, Angular) are thin adapters.
+
+## Monorepo Packages
+
+| Package | npm name | Purpose |
+|---------|----------|---------|
+| `packages/core` | `@witqq/spreadsheet` | Engine: rendering, data, editing, selection, commands. Zero external deps. |
+| `packages/react` | `@witqq/spreadsheet-react` | React wrapper (`<Spreadsheet>` component) |
+| `packages/vue` | `@witqq/spreadsheet-vue` | Vue wrapper |
+| `packages/angular` | `@witqq/spreadsheet-angular` | Angular wrapper |
+| `packages/widget` | `@witqq/spreadsheet-widget` | Single-file IIFE/UMD bundle for embedding |
+| `packages/plugins` | `@witqq/spreadsheet-plugins` | Official plugins (formulas, collaboration, context menu, etc.) |
+| `packages/demo` | `@witqq/spreadsheet-demo` | Demo app (React + Vite, private) |
+| `packages/server` | — | Collaboration WebSocket server |
+| `packages/site` | — | Documentation site (Astro + Starlight) |
+
+## Core Engine Architecture
+
+### Entry Point
+
+`SpreadsheetEngine` (`packages/core/src/engine/spreadsheet-engine.ts`) is the main class. It orchestrates ~30 subsystems and uses two-phase initialization:
+
+- **Constructor** (headless) — creates CellStore, ColStore, RowStore, EventBus, CommandManager, LayoutEngine, and other non-DOM subsystems
+- **mount()** — creates DOM-dependent subsystems: CanvasManager, ScrollManager, RenderPipeline, InlineEditor, SelectionManager
+
+---
+
+## Rendering Pipeline
+
+*Source: `packages/core/src/renderer/`*
+
+### RenderScheduler
+
+*Source: `render-scheduler.ts`*
+
+Classic RAF coalescing with a boolean dirty flag. When `requestRender()` is called:
+
+1. If `dirty` is already `true`, return immediately (coalescing — any number of calls per frame collapse to one)
+2. Set `dirty = true`, schedule a single `requestAnimationFrame`
+3. Inside the RAF callback: reset `dirty = false`, invoke `renderCallback()`
+
+The coalescing is O(1) — the first `requestRender()` in a frame wins the RAF slot, all subsequent calls are no-ops. No queue, no debounce timer, no priority system.
+
+### RenderPipeline
+
+*Source: `render-pipeline.ts`*
+
+Orchestrates layer rendering. Layers are stored in an ordered array.
+
+**Non-frozen render cycle:**
+1. `ctx.clearRect(0, 0, canvasWidth, canvasHeight)` — wipe entire canvas
+2. Iterate layers in order, call `layer.render(renderContext)` with viewport/scroll/theme/geometry
+
+**Default layer order** (from GridRenderer, `grid-renderer.ts`):
+1. BackgroundLayer — cell backgrounds
+2. CellTextLayer — cell values, formatted text
+3. CellStatusLayer — validation icons, status indicators
+4. EmptyStateLayer — placeholder when no data
+5. GridLinesLayer — grid borders (if enabled)
+6. HeaderLayer — column/row headers
+7. RowNumberLayer — row numbers (if enabled)
+8. SelectionOverlayLayer — selection highlight, active cell (always last)
+
+Plugin layers are inserted before GridLinesLayer (or before SelectionOverlayLayer if no grid lines), ensuring plugins render above cell text but below the grid overlay.
+
+### Frozen Pane Rendering
+
+When frozen rows or columns are configured, the pipeline switches to a 4-region compositing model:
+
+| Region | Clip Area | Scrolls With | Cache Strategy |
+|--------|-----------|-------------|----------------|
+| **corner** | Top-left intersection | Neither axis | Rendered once, cached as ImageData |
+| **frozenRow** | Top strip, scrollable columns | Horizontal scroll only | Cached, re-rendered when scrollX changes |
+| **frozenCol** | Left strip, scrollable rows | Vertical scroll only | Cached, re-rendered when scrollY changes |
+| **main** | Remaining area | Both axes | Re-rendered every frame |
+
+For each layer × each region: `ctx.save()` → clip to region rect → `layer.render()` → `ctx.restore()`.
+
+**ImageData caching:** After rendering, regions are captured via `ctx.getImageData()` at DPR-scaled coordinates. On subsequent frames, unchanged regions are restored via `ctx.putImageData()` instead of re-rendering all layers. Five caches are maintained: corner, frozenRow, frozenCol, frozenRowHeaders, frozenColRowNumbers.
+
+Cache invalidation occurs on theme change, data change, or structural change (column/row add/remove).
+
+### Key Layer Implementations
+
+**BackgroundLayer** (`background-layer.ts`) — fills entire canvas with `theme.colors.background`. Always the first layer.
+
+**CellTextLayer** (`cell-text-layer.ts`) — the most complex layer:
+1. Clips to cell area (excluding headers and row number gutter)
+2. Collects visible cells, handling merge anchors that may be off-screen
+3. For each cell, resolves the cell type from column definition, cell data, or auto-detection
+4. Custom renderer path: delegates to `renderer.render()` if the cell type provides one
+5. Wrap text path: uses `TextMeasureCache.getWrappedLines()` for word breaking, draws each line with proper alignment and vertical centering
+6. Single-line path: uses `TextMeasureCache.truncateText()` with ellipsis, draws via `ctx.fillText()`
+7. Also provides `measureHeights()` for the auto row-size system
+
+**SelectionOverlayLayer** (`selection-overlay-layer.ts`) — draws selection fills (translucent rectangles) and borders for each range, plus the active cell border with merge-awareness.
+
+### CanvasManager
+
+*Source: `canvas-manager.ts`*
+
+Manages the `<canvas>` element with DPI-aware scaling:
+- Sets physical canvas size to `cssWidth × dpr` by `cssHeight × dpr`
+- Sets CSS display size to match container
+- Applies `ctx.setTransform(dpr, 0, 0, dpr, 0, 0)` so all drawing uses CSS pixel coordinates while rendering at native resolution
+
+Detects browser zoom (DPR changes) via `matchMedia(\`(resolution: ${dpr}dppx)\`)` and re-syncs canvas size on change.
+
+---
+
+## Data Model
+
+*Source: `packages/core/src/model/`*
+
+### CellStore
+
+*Source: `cell-store.ts`*
+
+Sparse map storage: `Map<string, CellData>` keyed by `"row:col"` string (e.g. `"5:3"`). Only non-empty cells are stored.
+
+**Version tracking:** `_version` counter incremented on every `set()`, `delete()`, `clear()`. Bulk methods (`bulkLoadChunk`, `bulkGenerate`) increment version once at the end for efficiency.
+
+**CellData interface** (`types/interfaces.ts`):
+- `value: CellValue` — raw value (`string | number | boolean | Date | null`)
+- `displayValue?: string` — formatted override
+- `formula?: string` — e.g. `"=SUM(A1:A10)"`
+- `style?: CellStyleRef` — `{ ref: string, style: CellStyle }`
+- `type?: CellType` — rendering/editing behavior
+- `metadata?: CellMetadata` — status, errors, links, comments
+
+All CellData fields are `readonly`.
+
+**CellType union:** `'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'select' | 'dynamicSelect' | 'formula' | 'link' | 'image' | 'progressBar' | 'rating' | 'badge' | 'custom'`
+
+**Key methods:** `get/set/has/delete` (O(1)), `setValue()` (merges with existing data), `setMetadata()`, `iterateRange()` (generator over bounds), `bulkLoad()` / `bulkGenerate()` (progressive loading).
+
+CellStore has no row-shift logic — row insertion/deletion is handled externally by RowStore.
+
+### ColStore
+
+*Source: `col-store.ts`*
+
+Ordered array of `ColumnDef[]` plus `Set<number>` for hidden columns. Each ColumnDef contains: `key`, `title`, `width`, `minWidth?`, `maxWidth?`, `type?: CellType`, `frozen?`, `sortable?`, `filterable?`, `editable?`, `resizable?`, `hidden?`, `wrapText?`, `validation?`.
+
+Version-tracked like CellStore.
+
+### RowStore
+
+*Source: `row-store.ts`*
+
+Three sparse collections:
+- `manualHeightOverrides: Map<number, number>` — user drag-resized heights
+- `autoHeightOverrides: Map<number, number>` — auto-measured heights
+- `hiddenRows: Set<number>`
+
+**Height resolution priority:** hidden → 0, manual override → auto override → defaultHeight.
+
+`setAutoHeightsBatch()` only updates rows without manual overrides and uses epsilon comparison (0.01) to avoid unnecessary version bumps.
+
+`shiftRowsUp(deletedRow)` rebuilds all three collections, shifting indices down by 1.
+
+### DataView
+
+*Source: `dataview/data-view.ts`*
+
+Provides logical (visible/sorted/filtered) ↔ physical (CellStore) row index mapping.
+
+**Passthrough mode:** When no sort or filter is active, mapping is `null` — all lookups return identity. Zero overhead.
+
+**Active mapping:** `_mapping: number[]` where `mapping[logicalRow] = physicalRow`, plus `_reverseMapping: Map<number, number>` for physical → logical lookups.
+
+`recompute(physicalIndices[])` rebuilds mapping from sorted/filtered index array. `reset()` returns to passthrough.
+
+---
+
+## Layout Engine
+
+*Source: `packages/core/src/renderer/layout-engine.ts`*
+
+All position data stored in `Float64Array` typed arrays for cache-friendly memory access and 64-bit precision:
+
+| Array | Size | Purpose |
+|-------|------|---------|
+| `colPositions` | visibleCols + 1 | Cumulative x-offsets (prefix sum) |
+| `colWidths` | visibleCols | Per-column widths |
+| `rowPositions` | rowCount + 1 | Cumulative y-offsets (prefix sum) |
+| `rowHeights` | rowCount | Per-row heights |
+
+### Construction
+
+Filters hidden columns, then builds prefix-sum arrays in a single linear pass. The "+1" entry stores the total dimension (e.g. `colPositions[n] = totalWidth`).
+
+### getCellRect — O(1)
+
+Pure array index lookups:
+```
+x = rowNumberWidth + colPositions[colIndex]
+y = headerHeight + rowPositions[rowIndex]
+width = colWidths[colIndex]
+height = rowHeights[rowIndex]
+```
+
+No computation beyond array indexing. Returns `{0,0,0,0}` for out-of-bounds inputs.
+
+### Hit-testing — O(log n) binary search
+
+`getRowAtY(y)` and `getColAtX(x)` both use binary search on the cumulative positions array to find which cell a pixel coordinate falls within. Returns -1 if outside content bounds.
+
+### Mutation
+
+- `setRowHeight(row, h)` — updates height, recomputes cumulative positions from that row onward: O(n−row)
+- `setRowHeightsBatch(Map<row, h>)` — applies all changes, single recompute pass from minimum changed index: much faster than N individual calls
+- `setRowCount(count)` — if exceeding current capacity, reallocates new Float64Array instances and copies old data via `.set(subarray)` (memcpy-speed)
+
+### Frozen pane helpers
+
+`getFrozenRowsHeight(count)` and `getFrozenColsWidth(count)` are O(1) prefix-sum lookups.
+
+### ViewportManager
+
+*Source: `viewport-manager.ts`*
+
+Determines visible cells by binary-searching scroll position against LayoutEngine's cumulative arrays:
+
+1. `layout.getRowAtY(scrollY)` → first visible row
+2. `layout.getRowAtY(scrollY + viewportHeight)` → last visible row
+3. Same for columns
+
+Applies render buffers: 10 extra rows and 5 extra columns beyond the visible area for smooth scrolling.
+
+For frozen panes, computes 4 separate viewport ranges (corner, frozenRow, frozenCol, main), each with appropriate scroll offsets.
+
+### ScrollManager
+
+*Source: `scroll-manager.ts`*
+
+Uses a transparent absolutely-positioned `<div>` with `overflow: auto` overlaying the canvas. A spacer div inside is sized to the total content dimensions, creating native scrollbars without rendering content. The scroll listener uses `{ passive: true }` for performance and syncs `scrollLeft`/`scrollTop` to the rendering pipeline.
+
+---
+
+## Editing
+
+*Source: `packages/core/src/editing/`*
+
+### Two-Tier Architecture
+
+The editing system has a two-tier design:
+
+1. **InlineEditor** — built-in textarea fallback for free-text editing (text, number)
+2. **CellEditorRegistry** + **CellEditor** interface — dispatches to specialized overlay editors (date pickers, etc.) for specific column types
+
+The engine method `openCellEditor()` is the central dispatch point: it queries the registry first, falls back to InlineEditor if no match.
+
+### InlineEditor
+
+*Source: `editing/inline-editor.ts`*
+
+A `<textarea>` element positioned absolutely over the target cell at `z-index: 20`.
+
+**Positioning:** Gets the cell rect from `LayoutEngine.getCellRect()`, subtracts scroll offsets (skipped for frozen cells). For merged cells, computes the spanning rect across the merge region.
+
+**Triggers:**
+- **F2** → opens editor, selects all existing content
+- **Double-click** → same as F2
+- **Type-to-edit** (any printable character) → opens editor with typed character as initial text, replaces cell value. Only for non-overlay types — overlay editors (date, datetime) are opened without initial text.
+
+**Commit/Cancel:**
+| Key | Behavior |
+|-----|----------|
+| Enter | Commit, move cursor down |
+| Shift+Enter | Commit, move cursor up |
+| Tab | Commit, move cursor right |
+| Shift+Tab | Commit, move cursor left |
+| Escape | Cancel without saving |
+| Scroll | Commit and close (except frozen corner cells) |
+| Click outside | Commit and close |
+
+**Value coercion:** On commit, attempts to parse the string back to the original type — numbers are parsed via `Number()`, booleans via string comparison.
+
+### CellEditorRegistry
+
+*Source: `editing/cell-editor-registry.ts`*
+
+Maps cell types to editor factories. Entries are sorted by priority (highest first) for O(n) first-match resolution.
+
+- `register(editor, matcher, priority)` — adds a `{editor, matcher, priority}` entry
+- `registerForType(editor, type, priority)` — convenience; creates a type-equality matcher
+- `resolve(column, value)` — returns the first matching editor, or `null` (engine falls back to InlineEditor)
+
+**CellEditor interface** (`editing/cell-editor.ts`):
+- `open(context, commitFn, closeFn)` — receives a rich context including row, col, value, column, container, layout engine, theme, locale, merge manager
+- `close(reason)` — editor removes its DOM and calls closeFn
+- `setTheme()` / `setLocale()` — runtime updates
+- `destroy()` — full cleanup
+
+### Overlay Editors
+
+**DatePickerOverlay** (`editing/date-picker-overlay.ts`) — calendar popup positioned below the cell (or above if no room below) at `z-index: 50`. Pure DOM calendar grid with month navigation, keyboard support (arrows, Enter, Escape), and a "Today" footer button.
+
+**DatePickerEditor** (`editing/date-picker-editor.ts`) — adapter implementing `CellEditor` that wraps DatePickerOverlay. Registered for column type `'date'`.
+
+**DateTimeEditor** (`editing/date-time-editor.ts`) — directly implements `CellEditor`. Adds hour/minute spin controls below the calendar. Has a `FocusSection` state machine (`'calendar' | 'hour' | 'minute'`) for Tab cycling between sections. Commits ISO datetime strings. Registered for column type `'datetime'`.
+
+### Command Integration
+
+*Source: `packages/core/src/commands/`*
+
+The editing→command data flow:
+
+```
+Editor commit → engine onCommit callback
+  → dataView.getPhysicalRow(logicalRow)   // handle sorting/filtering
+  → new CellEditCommand(cellStore, physRow, col, old, new)
+  → commandManager.execute(command)        // pushes to undo stack
+  → eventBus.emit('cellChange', ...)       // notify listeners
+  → renderScheduler.requestRender()        // schedule repaint
+```
+
+**CellEditCommand** (`commands/cell-edit-command.ts`) — stores row, col, oldValue, newValue. `execute()` calls `cellStore.setValue()`, `undo()` restores the old value.
+
+**BatchCellEditCommand** (`commands/batch-cell-edit-command.ts`) — for multi-cell operations (paste, autofill). Undo applies changes in reverse order.
+
+**CommandManager** (`commands/command-manager.ts`) — classic dual-stack undo/redo with configurable `historyLimit` (default 100). `execute()` pushes to undo stack and clears redo stack.
+
+Key design: logical→physical row translation happens at commit time, not in the command — commands store physical rows so undo works correctly even after re-sorting.
+
+---
+
+## Event System
+
+*Source: `packages/core/src/events/`*
+
+### Architecture
+
+```
+DOM Events → EventTranslator → EventBus → Handlers
+```
+
+### EventBus
+
+*Source: `events/event-bus.ts`*
+
+Minimal typed pub/sub: `Map<string, Set<EventHandler>>`. Methods: `on(event, handler)`, `off(event, handler)`, `emit(event, ...args)`, `destroy()`.
+
+The `Set` storage provides O(1) add/delete and prevents double-registration. Emit is synchronous — no error boundaries, no priority ordering, no async support. `destroy()` calls `listeners.clear()`.
+
+### EventTranslator
+
+*Source: `events/event-translator.ts`*
+
+Bridges DOM events to grid-domain events. Attaches 9 DOM listeners on the scroll container: `mousedown`, `mousemove`, `mouseup`, `dblclick`, `keydown`, `contextmenu`, `touchstart`, `touchmove`, `touchend`.
+
+**Core method — `hitTest(offsetX, offsetY)`:** Converts pixel coordinates to `{ region, row, col }`:
+1. Reads scroll position and frozen pane boundaries
+2. Determines region by quadrant: header, row-number, corner, or cell
+3. Header region further subdivides into `header-sort-icon` / `header-filter-icon` by checking the rightmost 28px
+4. Row-number region checks for row-group-toggle via RowGroupManager
+5. Cell region delegates to `layoutEngine.getRowAtY()` / `getColAtX()`
+
+**Hit regions:** `'cell' | 'header' | 'header-sort-icon' | 'header-filter-icon' | 'row-number' | 'row-group-toggle' | 'corner' | 'outside'`
+
+**Touch support:** Implements tap/double-tap detection with thresholds (10px movement, 300ms duration, 300ms interval). Creates synthetic MouseEvent objects for downstream compatibility.
+
+### Event Categories
+
+| Category | Events |
+|----------|--------|
+| Public | `cellClick`, `cellDoubleClick`, `cellChange`, `selectionChange`, `scroll`, `ready`, `destroy` |
+| Command | `commandExecute`, `commandUndo`, `commandRedo` |
+| Clipboard | `clipboardCopy`, `clipboardCut`, `clipboardPaste` |
+| Resize | `columnResize`/`Start`/`End`, `rowResize`/`Start`/`End` |
+| Data | `cellStatusChange`, `cellValidation`, `sortChange`, `sortRejected`, `filterChange`, `themeChange`, autofill events, row group events |
+| Internal | `gridMouseDown`, `gridMouseMove`, `gridMouseUp`, `gridMouseHover`, `gridContextMenu`, `gridKeyDown` |
+
+### Lifecycle
+
+1. EventBus created in constructor
+2. EventTranslator created during `mount()`, calls `attach()` to bind DOM listeners
+3. Engine and sub-managers subscribe to internal events
+4. On `destroy()`: sub-managers destroyed first (can still emit during teardown), then EventTranslator detached, then EventBus destroyed last
+
+---
+
+## Selection & Navigation
+
+- **SelectionManager** — single/multi selection, ranges, keyboard extend
+- **KeyboardNavigator** — arrow keys, Tab, Enter, Home/End, Ctrl+combinations
+
+---
+
+## Plugin System
+
+*Source: `packages/core/src/plugins/plugin-types.ts`*
+
+### Plugin Interface
+
+```typescript
+interface SpreadsheetPlugin {
+  readonly name: string;            // unique ID
+  readonly version: string;         // semver
+  readonly dependencies?: string[]; // plugins that must be installed first
+  install(api: PluginAPI): void;    // called on registration
+  destroy?(): void;                 // cleanup hook
+}
+```
+
+Only two lifecycle hooks: `install` and `destroy`. Plugins extend behavior by subscribing to the EventBus and adding render layers during `install`.
+
+### Plugin Management
+
+Plugin management is embedded in SpreadsheetEngine (no separate PluginManager class). Two parallel Maps: `plugins: Map<string, SpreadsheetPlugin>` and `pluginAPIs: Map<string, SpreadsheetPluginAPI>`.
+
+**Registration:** `installPlugin(plugin)` — throws if already installed or if dependencies are missing. Dependencies are validated via linear check (all entries in `plugin.dependencies` must exist in the plugins map). No topological sort — caller must install in correct order.
+
+**Deferred install:** Plugins registered before `mount()` are batch-installed during mount, after the `'ready'` event.
+
+**Removal:** `removePlugin(name)` — blocks removal if other installed plugins depend on it, then calls `destroy()` and clears state.
+
+**Destroy order:** All plugins destroyed in reverse installation order during engine teardown.
+
+### Plugin API
+
+Each plugin receives a `PluginAPI` instance with:
+
+- **State isolation:** Private `Map<string, unknown>` per plugin via `getPluginState<T>(key)` / `setPluginState<T>(key, value)`. State is cleared on removal.
+- **Engine access:** `api.engine` provides full access to all engine internals — data stores, event bus, render layers, command manager, selection, layout, etc. This is a "full trust" model with no sandboxing.
+
+### Plugin Patterns
+
+**Render layer plugin** (e.g. ConditionalFormatPlugin):
+- `install()`: create custom RenderLayer, call `engine.addRenderLayer(layer, 'content')`
+- `destroy()`: call `engine.removeRenderLayer(layer)`
+
+**Event-driven plugin** (e.g. CollaborationPlugin):
+- `install()`: subscribe to EventBus events (`cellChange`, `selectionChange`), add RemoteCursorLayer
+- `destroy()`: unsubscribe all events, remove layer, disconnect transport
+
+**Context menu plugin** (e.g. ContextMenuPlugin):
+- `install()`: register menu items via `engine.registerContextMenuItem()`, store IDs in plugin state
+- `destroy()`: iterate stored IDs and unregister each
+
+## Features
+
+| Feature | Module | Description |
+|---------|--------|-------------|
+| Auto Row Height | `auto-row-size/` | Measures text and adjusts row heights automatically |
+| Column Stretch | `resize/column-stretch-manager.ts` | Stretches columns to fill container width |
+| Text Wrapping | Via AutoRowSize | Word wrap with automatic row height calculation |
+| Merge Cells | `merge/` | Cell merging with MergeManager |
+| Frozen Panes | `viewport/frozen-panes.ts` | Freeze rows/columns |
+| Sorting | `sort/` | Column sort with SortEngine |
+| Filtering | `filter/` | Column filters with FilterEngine + FilterPanel |
+| Validation | `validation/` | Cell validation rules |
+| Context Menu | `context-menu/` | Right-click menu with submenu support |
+| Clipboard | `clipboard/` | Copy/paste with TSV/HTML serialization |
+| Autofill | `autofill/` | Drag-fill with pattern detection |
+| Print | `print/` | Print support via PrintManager |
+| Themes | `themes/` | Light/dark themes, custom theming |
+| Locale | `locale/` | i18n — UI labels, date formats, number formats |
+| Grouping | `grouping/` | Row groups (expand/collapse) |
+| Pivot | `pivot/` | Pivot table engine |
+| Streaming | `streaming/` | Progressive data loading |
+| Accessibility | `aria/` | ARIA live regions, screen reader support |
+| Tooltips | `tooltip/` | Cell tooltips |
+
+## Official Plugins
+
+*Source: `packages/plugins/`*
+
+| Plugin | Description |
+|--------|-------------|
+| FormulaPlugin | Excel-compatible formulas (SUM, AVERAGE, IF, etc.) |
+| FormulaWorker | Web Worker offload for formula calculation |
+| ContextMenuPlugin | Standard context menu (cut, copy, paste, insert/delete) |
+| ConditionalFormatPlugin | Conditional formatting rules |
+| ExcelPlugin | .xlsx import/export |
+| ProgressiveLoaderPlugin | Lazy data loading |
+| CollaborationPlugin | Real-time collaboration via OT |
+
+## Cell Type System
+
+*Source: `packages/core/src/types/cell-type-registry.ts`*
+
+### Type Resolution
+
+Cell type is resolved via a 3-tier priority chain:
+1. **Column definition** (`ColumnDef.type`) — highest priority
+2. **Cell-level override** (`CellData.type`) — per-cell override
+3. **Auto-detection** (`CellTypeRegistry.detectType()`) — runtime inference: numbers → `'number'`, booleans → `'boolean'`, Date instances → `'date'`, everything else → `'string'`
+
+### CellType Union
+
+14 built-in types: `'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'select' | 'dynamicSelect' | 'formula' | 'link' | 'image' | 'progressBar' | 'rating' | 'badge' | 'custom'`
+
+### Built-in Renderers
+
+CellTypeRegistry registers renderers that control formatting (value → display string) and rendering:
+
+| Type | Format | Align | Custom Render |
+|------|--------|-------|---------------|
+| `string` | `String(value)` | left | No — default `fillText` |
+| `number` | `toLocaleString()` | right | No |
+| `boolean` | `String(value)` | center | Yes — checkbox square with checkmark stroke |
+| `date` | `toLocaleDateString()`, parses strings | left | No |
+
+The remaining 10 types (`datetime`, `select`, `dynamicSelect`, `formula`, `link`, `image`, `progressBar`, `rating`, `badge`, `custom`) have no built-in renderers — they fall back to the string renderer via `get()` fallback. They exist as type identifiers for custom renderer registration and editor resolution.
+
+### Custom Type Registration
+
+**Custom rendering:**
+```typescript
+engine.getCellTypeRegistry().register('progressBar', {
+  format: (v) => `${v}%`,
+  align: 'left',
+  render: (ctx, value, x, y, w, h, theme) => { /* draw bar */ },
+  measureHeight: (ctx, value, w, theme) => 30, // optional, for auto row height
+});
+```
+
+**Custom editing:** Via `CellEditorRegistry.registerForType(editor, 'progressBar')` or `register(editor, matcherFn, priority)` for arbitrary predicate matching.
+
+### Rendering Dispatch
+
+In CellTextLayer:
+- If the resolved renderer has a `render()` method → call it with full canvas control (ctx save/restore around each call)
+- Otherwise → call `format(value)`, then either:
+  - **Wrap text path:** `TextMeasureCache.getWrappedLines()` → multi-line with vertical centering
+  - **Single-line path:** `TextMeasureCache.truncateText()` with ellipsis → `ctx.fillText()`
+
+Alignment is driven by `renderer.align` → sets `ctx.textAlign` + computes x-position.
+
+### Locale-aware Formatting
+
+`CellTypeRegistry.setFormatLocale(locale)` dynamically replaces number and date renderers with locale-specific formatting using the BCP 47 tag from `locale.formatLocale`.
+
+---
+
+## Public API Surface
+
+*Source: `packages/core/src/index.ts`*
+
+The package exports runtime classes/functions and type-only definitions, grouped by domain:
+
+### Engine
+- **`SpreadsheetEngine`** — main entry point class
+- `SpreadsheetEngineConfig` — configuration type
+
+### Data Model
+- **`CellStore`**, **`RowStore`**, **`ColStore`**, **`StylePool`** — storage classes
+- **`DataView`** + `DataViewConfig` — filtered/sorted view
+- Types: `CellData`, `CellValue`, `CellStyle`, `CellType`, `CellAddress`, `CellRange`, `CellRect`, `CellMetadata`, `ColumnDef`, `Selection`, `MergedRegion`, `CellChange`, validation types, conditional format types
+
+### Rendering
+- **`CanvasManager`**, **`GridRenderer`**, **`GridGeometry`**, **`LayoutEngine`**, **`ViewportManager`**, **`RenderScheduler`**, **`DirtyTracker`**, **`ScrollManager`**, **`RenderPipeline`**, **`TextMeasureCache`**
+- Layers: **`CellTextLayer`**, **`CellStatusLayer`**, **`EmptyStateLayer`**, **`FillHandleLayer`**, **`RowGroupToggleLayer`**
+- Types: `RenderLayer`, `RenderContext`, `PaneRegion`, `RenderMode`, `ViewportRange`, `FrozenViewportRanges`, dirty tracking types
+
+### Editing
+- **`InlineEditor`**, **`DatePickerOverlay`**, **`DatePickerEditor`**, **`DateTimeEditor`**, **`CellEditorRegistry`**
+- Types: `CellEditor`, `CellEditorContext`, `CellEditorCommit`, `CellEditorClose`, `CellEditorMatcher`
+
+### Commands
+- **`CommandManager`**, **`CellEditCommand`**, **`BatchCellEditCommand`**, **`ResizeColumnCommand`**, **`ResizeRowCommand`**, **`MergeCellsCommand`**, **`UnmergeCellsCommand`**, **`InsertRowCommand`**, **`DeleteRowCommand`**
+- Types: `Command`, `CellEdit`, `CommandManagerConfig`
+
+### Events
+- **`EventBus`**, **`EventTranslator`**
+- Types: `SpreadsheetEvents`, `CellEvent`, `CellChangeEvent`, `GridMouseEvent`, `GridKeyboardEvent`, `HitTestResult`, `HitRegion`, all event types
+
+### Selection & Navigation
+- **`SelectionManager`**, **`KeyboardNavigator`**
+
+### Sort / Filter / Pivot / Grouping
+- **`SortEngine`**, **`FilterEngine`**, **`FilterPanel`**, **`PivotEngine`**, **`RowGroupManager`**
+- Utility functions: `compareCellValues`, `evaluateCondition`, `detectPattern`, `extendPattern`
+
+### Utilities
+- **`ClipboardManager`** + serializers (`serializeToTSV`, `serializeToHTML`, `parseTSV`, `parseHTML`)
+- **`AutofillManager`**, **`AutoRowSizeManager`**, **`ColumnResizeManager`**, **`ColumnStretchManager`**, **`RowResizeManager`**
+- **`TooltipManager`**, **`ContextMenuManager`** + `createDefaultMenuItems`
+- **`ChangeTracker`**, **`ValidationEngine`**, **`MergeManager`**, **`AriaManager`**, **`PrintManager`**, **`StreamingAdapter`**
+- Benchmark: `measureInitTime`, `measureMultiRun`, `measureThroughput`, `computeStats`, **`FPSCounter`**, **`BenchmarkRunner`**
+
+### Theme / Locale
+- **`CellTypeRegistry`** + `CellTypeRenderer`, `CellAlignment`
+- `SpreadsheetTheme` type, **`lightTheme`**, **`darkTheme`**
+- `SpreadsheetLocale` type, `ResolvedLocale` type, `resolveLocale` function, **`enLocale`**, **`ruLocale`**
+- `LINE_HEIGHT_MULTIPLIER` constant
+
+### Plugins
+- Types only: `SpreadsheetPlugin`, `PluginAPI`
+
+---
+
+## Configuration Reference
+
+*Source: `SpreadsheetEngineConfig` in `packages/core/src/engine/spreadsheet-engine.ts`*
+
+Defaults are applied inline using nullish coalescing (`??`) in the constructor and `mount()` method — there is no separate defaults file.
+
+### Layout Options
+
+| Option | Type | Default | Effect |
+|--------|------|---------|--------|
+| `columns` | `ColumnDef[]` | **required** | Column definitions |
+| `rowCount` | `number` | `data.length` | Total rows |
+| `width` | `number \| string` | container size | Container width |
+| `height` | `number \| string` | container size | Container height |
+| `rowHeight` | `number` | `28` (from theme) | Default row height in px |
+| `headerHeight` | `number` | `32` (from theme) | Header row height in px |
+| `frozenRows` | `number` | `0` | Rows frozen at top |
+| `frozenColumns` | `number` | `0` | Columns frozen at left |
+
+### Data Options
+
+| Option | Type | Default | Effect |
+|--------|------|---------|--------|
+| `data` | `Record<string, unknown>[]` | `[]` | Initial row data, bulk-loaded into CellStore on mount |
+
+### Feature Flags
+
+| Option | Type | Default | Effect |
+|--------|------|---------|--------|
+| `editable` | `boolean` | `false` | Enable inline cell editing |
+| `sortable` | `boolean` | `false` | Enable column header click-to-sort |
+| `showGridLines` | `boolean` | `true` | Show grid lines between cells |
+| `showRowNumbers` | `boolean` | `true` | Show row number column (width: 50px from theme) |
+| `autoRowHeight` | `boolean \| AutoRowSizeConfig` | `false` | Auto-measure row heights from content |
+| `stretchColumns` | `'all' \| 'last'` | `undefined` (off) | `'all'` distributes extra space evenly; `'last'` gives remainder to last column |
+
+### AutoRowSizeConfig (when `autoRowHeight` is an object)
+
+| Option | Type | Default | Effect |
+|--------|------|---------|--------|
+| `batchSize` | `number` | `100` | Off-screen async measurement batch size |
+| `minRowHeight` | `number` | `28` (from theme) | Floor height to prevent row collapse |
+| `cellPadding` | `number` | `8` | Extra vertical padding added to measured height |
+
+### Theme
+
+| Option | Type | Default | Effect |
+|--------|------|---------|--------|
+| `theme` | `SpreadsheetTheme` | `lightTheme` | Full visual theme (also ships `darkTheme`) |
+
+**`theme.colors`** — 23 color tokens: `gridLine`, `background`, `headerBackground`, `headerText`, `headerBorder`, `selectionFill`, `selectionBorder`, `activeCellBorder`, `fillHandle`, `cellText`, `cellBorder`, `cellEditBackground`, `alternateRowBackground`, `hoverRowBackground`, `frozenSeparator`, `scrollbarTrack`, `scrollbarThumb`, `scrollbarThumbHover`, `errorBackground`, `warningBackground`, `changedIndicator`, `savedIndicator`, `cellPlaceholder`
+
+**`theme.fonts`** — `cell` / `header`: font family (default `'Arial, sans-serif'`), `cellSize` / `headerSize`: font size in px (default `13`)
+
+**`theme.dimensions`** — `rowHeight: 28`, `headerHeight: 32`, `minColumnWidth: 40`, `scrollbarWidth: 14`, `cellPadding: 4`, `borderWidth: 1`, `rowNumberWidth: 50`
+
+**`theme.borders`** — `gridLineWidth: 1`, `selectionWidth: 2`, `activeCellWidth: 2`, `frozenPaneWidth: 2`
+
+### Locale
+
+| Option | Type | Default | Effect |
+|--------|------|---------|--------|
+| `locale` | `SpreadsheetLocale` | English defaults | UI string translations; missing keys fall back to English |
+
+`SpreadsheetLocale` sections: `formatLocale` (BCP 47 tag for number/date formatting), `contextMenu`, `datePicker`, `dateTimePicker`, `filter`, `grouping`, `emptyState`, `print`, `aria`.
+
+---
+
+## Demo App
+
+- **Stack**: React 19 + Vite
+- **Entry**: `packages/demo/src/main.tsx`
+- **URL**: `http://localhost:3150` (via Docker)
+- **Start**: `npm run dev` (Docker) or `cd packages/demo && npm run dev` (Vite on 5173)
+
+## Documentation Site
+
+- **Stack**: Astro + Starlight
+- **Content**: `packages/site/src/content/docs/` (47 MDX files)
+- **API reference**: TypeDoc → `docs/api/` (auto-generated HTML)
+
+## Development
+
+```bash
+npm run build          # Build core + react + plugins
+npm test               # Vitest unit tests
+npm run test:e2e       # Playwright E2E tests
+npm run dev            # Docker demo on :3150
+npm run lint           # ESLint
+```
diff --git a/docs/CHECKLIST.md b/docs/CHECKLIST.md
new file mode 100644
index 0000000..9c3dc72
--- /dev/null
+++ b/docs/CHECKLIST.md
@@ -0,0 +1,45 @@
+# Quality Checklist
+
+Pre-merge quality gates for @witqq/spreadsheet.
+
+## Code Quality
+
+- [ ] `npm run typecheck` passes (zero errors)
+- [ ] `npm run lint` passes (zero warnings)
+- [ ] `npm run format` applied (no diff)
+- [ ] No `any` types without justification comment
+- [ ] No `// @ts-ignore` without issue reference
+
+## Testing
+
+- [ ] `npm run test` — all unit tests pass
+- [ ] `npm run test:e2e` — all E2E tests pass
+- [ ] New code has unit tests (target: >80% branch coverage for changed files)
+- [ ] Performance-sensitive code has benchmark test
+- [ ] Edge cases covered: empty data, single row/col, large datasets (10K+ rows)
+
+## Performance
+
+- [ ] No regressions in render benchmarks (>10% degradation = block)
+- [ ] Canvas operations batched (no unnecessary `beginPath`/`stroke` in loops)
+- [ ] Large allocations avoided in hot paths (render, scroll, measure)
+- [ ] Caches used for repeated computations (TextMeasureCache, LayoutEngine)
+
+## API & Compatibility
+
+- [ ] Public API changes documented in CHANGELOG
+- [ ] No breaking changes to existing `SpreadsheetEngine` config
+- [ ] New interfaces exported from `packages/core/src/index.ts`
+- [ ] React/Vue/Angular wrappers updated if core API changed
+
+## Documentation
+
+- [ ] New public APIs have TSDoc comments
+- [ ] Complex algorithms have inline comments explaining "why"
+- [ ] Demo page updated if feature is user-visible
+
+## Review Criteria
+
+- [ ] PR description explains what and why
+- [ ] Changes are minimal and focused (one feature per PR)
+- [ ] No unrelated formatting changes
diff --git a/docs/DOCUMENTATION-STYLE-GUIDE.md b/docs/DOCUMENTATION-STYLE-GUIDE.md
new file mode 100644
index 0000000..5f902a7
--- /dev/null
+++ b/docs/DOCUMENTATION-STYLE-GUIDE.md
@@ -0,0 +1,111 @@
+# Documentation Style Guide
+
+## Two Types of Documentation
+
+### Internal Documentation (`docs/`)
+
+**Location**: `docs/`
+**Audience**: Developers working on the codebase
+**Content**: TypeDoc API reference (`docs/api/`), quality checklist (`docs/CHECKLIST.md`), this guide
+
+### Public Documentation (`packages/site/`)
+
+**Location**: `packages/site/src/content/docs/`
+**Audience**: Users of @witqq/spreadsheet
+**Content**: Guides, API reference, framework integration, migration docs
+**Framework**: Astro + Starlight
+
+### Key Differences
+
+| Aspect        | Internal (`docs/`)       | Public (`packages/site/`)     |
+| ------------- | ------------------------ | ----------------------------- |
+| Scope         | System internals         | User-facing features          |
+| Detail level  | Implementation-specific  | Usage-focused with demos      |
+| Code examples | TypeScript internals     | React/Vue/Angular integration |
+| Format        | Markdown + TypeDoc       | MDX with interactive demos    |
+
+## Mandatory: Keep Site Docs in Sync with Code
+
+When adding, changing, or removing **public API functions, interfaces, config options, or user-visible behavior**:
+
+1. Update the relevant guide in `packages/site/src/content/docs/guides/`
+2. Update `packages/site/src/content/docs/api/` if types or engine API changed
+3. Add or update interactive demo components in `packages/site/src/components/demos/` if the feature is visual
+
+### What Triggers a Site Docs Update
+
+| Code Change | Required Site Update |
+|---|---|
+| New `SpreadsheetEngineConfig` option | `api/wit-engine.mdx` + relevant guide |
+| New column type or `CellType` | `api/cell-types.mdx` |
+| New public interface/type | `api/types.mdx` |
+| New editing behavior | `guides/editing.mdx` |
+| New context menu feature | `guides/context-menu.mdx` |
+| New plugin capability | `plugins/` section |
+| Changed keyboard shortcuts | Relevant guide |
+| New framework wrapper API | `frameworks/` section |
+
+### What Does NOT Require Site Update
+
+- Internal refactoring with no API change
+- Test additions
+- Build/CI changes
+- Performance optimizations (unless config options changed)
+
+## TSDoc on Public APIs
+
+All public interfaces, types, and functions exported from `packages/core/src/index.ts` must have TSDoc comments:
+
+```typescript
+/**
+ * Configuration for automatic row height measurement.
+ * When enabled, row heights adjust to fit wrapped text content.
+ */
+export interface AutoRowSizeConfig {
+  /** Number of rows to measure per idle callback batch. Default: 50 */
+  batchSize?: number;
+  /** Minimum row height in pixels. Default: 24 */
+  minRowHeight?: number;
+}
+```
+
+Complex algorithms require inline comments explaining "why", not "what":
+
+```typescript
+// Measure viewport rows synchronously for instant visual result,
+// defer off-screen rows to idle callbacks to avoid blocking
+```
+
+## Content Rules
+
+### Forbidden
+
+- Historical information ("was changed", "replaced", "improved")
+- Marketing language ("enhanced", "better", "amazing")
+- Test counts ("42/42 tests pass")
+- Version-specific details in guides
+- Personal opinions ("we recommend")
+
+### Required
+
+- Technical facts only
+- Code examples with real syntax from source
+- Concrete commands and paths
+- Interface definitions matching actual code
+
+## File Structure
+
+```
+docs/
+  api/                  # TypeDoc generated API reference
+  CHECKLIST.md          # Quality checklist for PRs
+  DOCUMENTATION-STYLE-GUIDE.md  # This file
+
+packages/site/src/content/docs/
+  api/                  # Public API reference (MDX)
+  concepts/             # Core concepts
+  frameworks/           # React, Vue, Angular, Widget guides
+  getting-started/      # Installation, quick start
+  guides/               # Feature guides with interactive demos
+  plugins/              # Plugin documentation
+```
diff --git a/docs/SCREENSHOT-VALIDATION-GUIDE.md b/docs/SCREENSHOT-VALIDATION-GUIDE.md
new file mode 100644
index 0000000..dcee109
--- /dev/null
+++ b/docs/SCREENSHOT-VALIDATION-GUIDE.md
@@ -0,0 +1,254 @@
+# Screenshot Validation Guide
+
+Screenshot validation captures UI state via Playwright scripts during development workflow steps. An HTML report embeds captured screenshots so the user can approve or reject changes without visiting a running instance.
+
+## Workflow Variable
+
+The development workflow stores the path to this file in:
+
+```
+screenshot_guide_path = "docs/SCREENSHOT-VALIDATION-GUIDE.md"
+```
+
+When `screenshot_validation_enabled = "yes"`, the agent reads this guide and follows its process on every implementation step.
+
+## Directory Structure
+
+Each step stores screenshots inside the workspace:
+
+```
+moira-ws/<workspace>/
+├── screenshots/               # Playwright capture scripts (accumulative)
+│   ├── capture-step-1.ts
+│   ├── capture-step-2.ts
+│   └── ...
+├── step-1/
+│   ├── iteration-1/
+│   │   └── screenshots/       # Captured PNG files
+│   │       ├── 01-grid-default.png
+│   │       └── 02-feature-active.png
+│   ├── step-report.html       # HTML report with embedded screenshots
+│   └── screenshot-report.html # Screenshot-only HTML report (optional)
+├── step-2/
+│   └── ...
+└── development-plan.md
+```
+
+## Canvas Capture Helpers
+
+This project renders on `<canvas>`. Screenshots must wait for canvas rendering to complete.
+
+### Wait for Render
+
+```typescript
+async function waitForTableRender(page: import('playwright').Page) {
+  await page.waitForSelector('canvas', { timeout: 10000 });
+  await page.evaluate(
+    () => new Promise<void>((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+    )
+  );
+}
+```
+
+### Widget Bundle for Standalone Pages
+
+For isolated screenshots without the demo app, use the widget bundle:
+
+```typescript
+import path from 'path';
+
+const WIDGET_BUNDLE = path.resolve(
+  __dirname,
+  '../../packages/widget/dist/witqq-spreadsheet-widget.umd.cjs',
+);
+
+async function setupGrid(page: import('playwright').Page) {
+  await page.setContent(`
+    <html>
+      <head><style>body { margin: 0; } #grid { width: 800px; height: 500px; margin: 12px; }</style></head>
+      <body><div id="grid"></div></body>
+    </html>
+  `);
+  await page.addScriptTag({ path: WIDGET_BUNDLE });
+  await page.evaluate(() => {
+    const S = (window as any).Spreadsheet;
+    S.create('#grid', {
+      columns: [
+        { key: 'name', title: 'Name', width: 200 },
+        { key: 'value', title: 'Value', width: 150, type: 'number' },
+      ],
+      data: [{ name: 'Item A', value: 100 }],
+    });
+  });
+  await waitForTableRender(page);
+}
+```
+
+## Writing Capture Scripts
+
+Each script captures screenshots for one step. Scripts are **accumulative** — each step adds new captures without removing previous scripts.
+
+### Script Template
+
+```typescript
+// screenshots/capture-step-N.ts
+import { chromium } from 'playwright';
+import * as path from 'path';
+import * as fs from 'fs';
+
+const STEP = 1;
+const OUTPUT_DIR = path.resolve(`moira-ws/<workspace>/step-${STEP}/iteration-1/screenshots`);
+const DEMO_URL = 'http://localhost:3150/demo/';
+
+async function capture() {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+
+  const browser = await chromium.launch();
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+
+  // --- Capture 1: Default grid ---
+  await page.goto(DEMO_URL);
+  await page.waitForSelector('canvas', { timeout: 10000 });
+  await page.evaluate(() =>
+    new Promise<void>(r => requestAnimationFrame(() => requestAnimationFrame(() => r())))
+  );
+  await page.screenshot({
+    path: path.join(OUTPUT_DIR, '01-default-grid.png'),
+  });
+
+  // --- Capture 2: Feature-specific view ---
+  // Navigate to visual-tests page with specific scenario:
+  await page.goto(`${DEMO_URL}visual-tests.html?scenario=frozen-panes`);
+  await page.waitForSelector('canvas', { timeout: 10000 });
+  await page.evaluate(() =>
+    new Promise<void>(r => requestAnimationFrame(() => requestAnimationFrame(() => r())))
+  );
+  await page.screenshot({
+    path: path.join(OUTPUT_DIR, '02-frozen-panes.png'),
+  });
+
+  await browser.close();
+  console.log(`Captured ${fs.readdirSync(OUTPUT_DIR).length} screenshots to ${OUTPUT_DIR}`);
+}
+
+capture().catch(console.error);
+```
+
+### Capture Checklist
+
+For each step, capture:
+
+- Full grid screenshot of the default state
+- Each new UI element (editor popups, context menus, overlays)
+- Interactive states (editing mode, date picker open, selection active)
+- Data states (cells with values, formatted numbers, dates)
+- Edge cases (empty grid, large dataset, scrolled state)
+
+## Running Scripts
+
+```bash
+# Docker must be running for the demo app:
+npm run dev
+
+# Run capture script:
+npx tsx moira-ws/<workspace>/screenshots/capture-step-N.ts
+
+# For widget-based captures, rebuild widget first:
+cd packages/widget && npm run build && cd ../..
+```
+
+## HTML Report Generation
+
+After capturing, generate a self-contained HTML report. The report embeds screenshots as base64 so users can open it locally without a running server.
+
+### Report Requirements
+
+1. **Self-contained** — single `.html` file with embedded CSS and base64 images
+2. **All screenshots visible** — each screenshot displayed at readable size
+3. **Labeled** — filename or description next to each image
+4. **Click-to-expand** — thumbnails with click to show full resolution
+5. **Step context** — title includes step number and description
+6. **Decision-ready** — user must be able to approve/reject the step based solely on the report
+
+### Embedding Screenshots as Base64
+
+```typescript
+import * as fs from 'fs';
+import * as path from 'path';
+
+function embedScreenshot(filePath: string): string {
+  const buffer = fs.readFileSync(filePath);
+  return `data:image/png;base64,${buffer.toString('base64')}`;
+}
+
+function generateReport(screenshotDir: string, stepIndex: number, description: string): string {
+  const files = fs.readdirSync(screenshotDir).filter(f => f.endsWith('.png')).sort();
+
+  const cards = files.map(file => {
+    const src = embedScreenshot(path.join(screenshotDir, file));
+    return `
+    <div class="screenshot-card">
+      <h3>${file}</h3>
+      <img src="${src}" alt="${file}" onclick="this.classList.toggle('expanded')" />
+    </div>`;
+  }).join('\n');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Step ${stepIndex} — Screenshot Report</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
+    h1 { border-bottom: 2px solid #333; padding-bottom: 10px; }
+    .screenshot-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
+    .screenshot-card { background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .screenshot-card h3 { margin: 0 0 12px 0; font-size: 14px; color: #666; }
+    .screenshot-card img { max-width: 100%; cursor: pointer; border: 1px solid #eee; border-radius: 4px; }
+    .screenshot-card img.expanded { max-width: none; width: 100%; }
+  </style>
+</head>
+<body>
+  <h1>Step ${stepIndex}: ${description}</h1>
+  <p>Screenshots: ${files.length} | Generated: ${new Date().toISOString()}</p>
+  <div class="screenshot-grid">${cards}</div>
+</body>
+</html>`;
+}
+```
+
+### Saving the Report
+
+```typescript
+const html = generateReport(
+  `moira-ws/<workspace>/step-${STEP}/iteration-1/screenshots`,
+  STEP,
+  'Step description here',
+);
+
+fs.writeFileSync(`moira-ws/<workspace>/step-${STEP}/screenshot-report.html`, html);
+```
+
+## Validation Criteria
+
+When validating screenshots, check:
+
+| Check | Pass | Fail |
+|-------|------|------|
+| Canvas renders | Grid lines, headers, cells visible | Blank/white canvas |
+| Layout | Columns aligned, rows spaced | Overlapping text, misaligned headers |
+| Data | Cell values displayed, formatted | Empty cells when data expected |
+| Editors | Popup positioned over cell, inputs visible | Editor off-screen, clipped, missing |
+| Themes | Colors match theme (light/dark) | Wrong colors, unstyled elements |
+| Scroll | Content visible at scroll positions | Missing rows, broken frozen panes |
+
+## Existing Visual Regression Infrastructure
+
+Separately from ad-hoc screenshot validation, the project has a permanent visual regression suite:
+
+- `tests/e2e/visual-regression.test.ts` — 43 scenarios with `toHaveScreenshot()`
+- 258 baseline snapshots in `tests/e2e/visual-regression.test.ts-snapshots/`
+- Scenarios defined in `packages/demo/src/visual-tests/scenarios/`
+- Run: `npx playwright test tests/e2e/visual-regression.test.ts --project=chromium`
+- Update baselines: `npx playwright test tests/e2e/visual-regression.test.ts --update-snapshots`
diff --git a/docs/TESTING-GUIDE.md b/docs/TESTING-GUIDE.md
new file mode 100644
index 0000000..0512d3f
--- /dev/null
+++ b/docs/TESTING-GUIDE.md
@@ -0,0 +1,176 @@
+# Testing Guide
+
+## Frameworks
+
+| Layer | Framework | Config |
+|-------|-----------|--------|
+| Unit tests | [Vitest](https://vitest.dev/) | `vitest.config.ts` |
+| E2E tests | [Playwright](https://playwright.dev/) | `playwright.config.ts` |
+
+## Running Tests
+
+```bash
+# Unit tests (all packages)
+npm test                         # vitest run
+
+# E2E tests (requires Docker or running demo)
+npm run test:e2e                 # playwright test (starts Docker automatically)
+npm run test:e2e:remote          # against remote server (BASE_URL=http://testold:3150)
+
+# Single E2E project
+npx playwright test --project=chromium
+
+# Single test file
+npx vitest run packages/core/tests/cell-store.test.ts
+npx playwright test tests/e2e/smoke.test.ts
+```
+
+## Directory Structure
+
+```
+packages/
+├── core/tests/              # engine unit tests
+├── plugins/tests/           # plugin unit tests
+│   └── collaboration/       # collaboration plugin tests
+├── vue/tests/               # Vue wrapper
+├── angular/tests/           # Angular wrapper
+├── widget/tests/            # web component
+├── server/tests/            # collab server
+└── site/tests/              # data generation
+
+tests/
+└── e2e/                     # Playwright E2E tests
+```
+
+Run `npx vitest run` and `npx playwright test` to get current counts.
+
+## Unit Test Conventions
+
+### File naming
+
+`[module-name].test.ts` — one test file per module, placed in `packages/<pkg>/tests/`.
+
+### Environment
+
+Tests that need DOM access use the jsdom pragma at the top of the file:
+
+```ts
+// @vitest-environment jsdom
+```
+
+Some core test files use jsdom; the rest run in the default Node environment.
+
+### Imports
+
+```ts
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { CellStore } from '../src/model/cell-store';
+```
+
+- Import test APIs from `vitest`, not from globals.
+- Import source modules via relative paths (`../src/...`).
+- The `@witqq/spreadsheet` alias resolves to `packages/core/src/index.ts` (configured in `vitest.config.ts`).
+
+### Structure
+
+```ts
+describe('ModuleName', () => {
+  describe('feature group', () => {
+    it('specific behavior', () => {
+      // arrange → act → assert
+    });
+  });
+});
+```
+
+### Mocking
+
+Use `vi.fn()` and `vi.spyOn()` for mocks. No shared test helpers directory — each test file creates its own mocks inline.
+
+```ts
+const callback = vi.fn();
+engine.on('render', callback);
+engine.requestRender();
+expect(callback).toHaveBeenCalledOnce();
+```
+
+### Known Gotcha: `document.activeElement`
+
+jsdom does not track `document.activeElement` after programmatic `focus()`. For focus verification in tests, check `boxShadow` style instead:
+
+```ts
+expect(editorEl.style.boxShadow).toContain('0 0 0 2px');
+```
+
+## E2E Test Conventions
+
+### File naming
+
+`[feature].test.ts` in `tests/e2e/`.
+
+### Structure
+
+```ts
+import { test, expect } from '@playwright/test';
+
+test('descriptive name', async ({ page }) => {
+  await page.goto('/demo/');
+  // interact and assert
+});
+```
+
+### Configuration
+
+- Base URL: `http://localhost:3150` (Docker demo app)
+- Timeout: 30s per test, 5s per expect
+- Screenshots: only on failure
+- Trace: on first retry
+- Retries: 2 in CI, 1 locally
+- Browser projects: Chromium, Firefox, WebKit
+
+### Web Server
+
+Playwright auto-starts Docker (`docker compose up --build`) if `BASE_URL` is not set. Timeout for server startup: 120s.
+
+### Canvas Testing
+
+The spreadsheet renders on `<canvas>`. Common patterns:
+
+```ts
+// Wait for canvas to be visible
+const canvas = page.locator('canvas').first();
+await expect(canvas).toBeVisible();
+
+// Check canvas has non-blank content
+const isNonBlank = await canvas.evaluate((el: HTMLCanvasElement) => {
+  const ctx = el.getContext('2d');
+  if (!ctx) return false;
+  const data = ctx.getImageData(0, 0, el.width, el.height).data;
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i] !== 255 || data[i+1] !== 255 || data[i+2] !== 255) return true;
+  }
+  return false;
+});
+expect(isNonBlank).toBe(true);
+```
+
+### Visual Regression
+
+Use `toHaveScreenshot()` for pixel-level comparisons. Screenshot baselines are stored alongside test files.
+
+## Coverage
+
+Vitest V8 coverage is configured for `packages/*/src/**/*.ts`, excluding `packages/demo/`.
+
+```bash
+npx vitest run --coverage
+```
+
+## Writing New Tests
+
+1. Create `packages/<pkg>/tests/<module>.test.ts`
+2. Add `// @vitest-environment jsdom` if the module touches DOM
+3. Import from `vitest` and from source via relative paths
+4. Follow describe/it nesting: module → feature group → specific behavior
+5. Keep mocks local to the test file
+6. For E2E: create `tests/e2e/<feature>.test.ts`, navigate to `/demo/`, interact with canvas
diff --git a/eslint.config.js b/eslint.config.js
index a45655e..1471b02 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -9,7 +9,11 @@ export default tseslint.config(
   },
   {
     rules: {
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-unused-vars': ['error', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+      }],
       '@typescript-eslint/no-explicit-any': 'warn',
     },
   },
diff --git a/package-lock.json b/package-lock.json
index af9112d..62e2d98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "prettier": "^3.0.0",
         "typedoc": "^0.28.17",
         "typescript": "^5.7.0",
+        "typescript-eslint": "^8.56.1",
         "vitest": "^3.0.0"
       },
       "engines": {
@@ -2253,6 +2254,301 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz",
+      "integrity": "sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/type-utils": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.56.1",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.1.tgz",
+      "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.1.tgz",
+      "integrity": "sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.56.1",
+        "@typescript-eslint/types": "^8.56.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.1.tgz",
+      "integrity": "sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.1.tgz",
+      "integrity": "sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.1.tgz",
+      "integrity": "sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.1.tgz",
+      "integrity": "sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.1.tgz",
+      "integrity": "sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.56.1",
+        "@typescript-eslint/tsconfig-utils": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.1.tgz",
+      "integrity": "sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.1.tgz",
+      "integrity": "sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "license": "ISC"
@@ -8867,6 +9163,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-dedent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
@@ -9016,6 +9325,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.56.1.tgz",
+      "integrity": "sha512-U4lM6pjmBX7J5wk4szltF7I1cGBHXZopnAXCMXb3+fZ3B/0Z3hq3wS/CCUB2NZBNAExK92mCU2tEohWuwVMsDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.56.1",
+        "@typescript-eslint/parser": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/uc.micro": {
       "version": "2.1.0",
       "dev": true,
diff --git a/package.json b/package.json
index 940bfd5..64b1e0e 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "dev:remote": "infra-tools auto --server witqq",
     "build": "npm run build -w packages/core && npm run build -w packages/react && npm run build -w packages/plugins",
     "test": "vitest run",
+    "benchmark": "vitest run packages/core/tests/benchmark-suite.test.ts",
     "test:e2e": "playwright test",
     "test:e2e:remote": "BASE_URL=http://testold:3150 playwright test",
     "typecheck": "tsc --build",
@@ -36,6 +37,7 @@
     "prettier": "^3.0.0",
     "typedoc": "^0.28.17",
     "typescript": "^5.7.0",
+    "typescript-eslint": "^8.56.1",
     "vitest": "^3.0.0"
   },
   "engines": {
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index fc27a84..66a9d1b 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -13,8 +13,4 @@ export type {
   SpreadsheetTheme,
 } from '@witqq/spreadsheet';
 
-export {
-  SpreadsheetEngine,
-  lightTheme,
-  darkTheme,
-} from '@witqq/spreadsheet';
+export { SpreadsheetEngine, lightTheme, darkTheme } from '@witqq/spreadsheet';
diff --git a/packages/core/src/aria/aria-manager.ts b/packages/core/src/aria/aria-manager.ts
index 73827a6..02ce0f9 100644
--- a/packages/core/src/aria/aria-manager.ts
+++ b/packages/core/src/aria/aria-manager.ts
@@ -20,6 +20,7 @@ import type {
   FilterChangeEvent,
   CellValidationEvent,
 } from '../events/event-types';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
 export interface AriaManagerConfig {
   container: HTMLElement;
@@ -40,6 +41,7 @@ export class AriaManager {
   private readonly columns: ColumnDef[];
   private readonly rowCount: number;
   private liveRegion: HTMLElement | null = null;
+  private locale: ResolvedLocale | null = null;
 
   constructor(config: AriaManagerConfig) {
     this.container = config.container;
@@ -51,6 +53,11 @@ export class AriaManager {
     this.rowCount = config.rowCount;
   }
 
+  /** Set locale for accessibility announcements. */
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
   attach(): void {
     const visibleCols = this.columns.filter((c) => !c.hidden);
 
@@ -132,34 +139,40 @@ export class AriaManager {
     const colDef = visibleCols[col];
     const colName = colDef?.title ?? `Column ${col + 1}`;
     const value = cell?.value ?? '';
-    const displayValue = value === '' ? 'empty' : String(value);
+    const emptyLabel = this.locale?.aria?.cellEmpty ?? 'empty';
+    const displayValue = value === '' ? emptyLabel : String(value);
 
-    this.announce(`${colName}, Row ${row + 1}: ${displayValue}`);
+    const tpl = this.locale?.aria?.cellAnnouncement ?? '{column}, Row {row}: {value}';
+    this.announce(tpl.replace('{column}', colName).replace('{row}', String(row + 1)).replace('{value}', displayValue));
   };
 
   private handleSortChange = (event: SortChangeEvent): void => {
     if (event.sortColumns.length === 0) {
-      this.announce('Sort cleared');
+      this.announce(this.locale?.aria?.sortCleared ?? 'Sort cleared');
       return;
     }
 
+    const ascLabel = this.locale?.aria?.sortAscending ?? 'ascending';
+    const descLabel = this.locale?.aria?.sortDescending ?? 'descending';
     const descriptions = event.sortColumns.map((sc) => {
       const visibleCols = this.columns.filter((c) => !c.hidden);
       const colDef = visibleCols[sc.col];
       const colName = colDef?.title ?? `Column ${sc.col + 1}`;
-      const dir = sc.direction === 'asc' ? 'ascending' : 'descending';
+      const dir = sc.direction === 'asc' ? ascLabel : descLabel;
       return `${colName} ${dir}`;
     });
 
-    this.announce(`Sorted by ${descriptions.join(', then ')}`);
+    const tpl = this.locale?.aria?.sortedBy ?? 'Sorted by {columns}';
+    this.announce(tpl.replace('{columns}', descriptions.join(', then ')));
   };
 
   private handleFilterChange = (event: FilterChangeEvent): void => {
     const { visibleRowCount, totalRowCount } = event;
     if (visibleRowCount === totalRowCount) {
-      this.announce('Filter cleared, showing all rows');
+      this.announce(this.locale?.aria?.filterCleared ?? 'Filter cleared, showing all rows');
     } else {
-      this.announce(`Filtered: ${visibleRowCount} of ${totalRowCount} rows visible`);
+      const tpl = this.locale?.aria?.filterActive ?? 'Filtered: {visible} of {total} rows visible';
+      this.announce(tpl.replace('{visible}', String(visibleRowCount)).replace('{total}', String(totalRowCount)));
     }
   };
 
diff --git a/packages/core/src/auto-row-size/auto-row-size-manager.ts b/packages/core/src/auto-row-size/auto-row-size-manager.ts
new file mode 100644
index 0000000..d4b9856
--- /dev/null
+++ b/packages/core/src/auto-row-size/auto-row-size-manager.ts
@@ -0,0 +1,341 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * AutoRowSizeManager — orchestrates automatic row height measurement.
+ *
+ * Strategy:
+ * 1. Visible rows (viewport) are measured synchronously after render
+ *    for instant results on data load and column resize.
+ * 2. Off-screen rows are measured asynchronously via requestIdleCallback
+ *    in configurable batches to avoid blocking the main thread.
+ * 3. Heights are collected from all render layers that implement
+ *    measureHeights(), taking the maximum per row.
+ * 4. Results are applied via the engine's setAutoRowHeights() batch API.
+ * 5. Dirty tracking: only re-measures rows that changed (data edit,
+ *    column resize on wrap-enabled columns, theme/font changes).
+ */
+
+import type { RenderContext, RenderLayer } from '../renderer/render-layer';
+import type { RowStore } from '../model/row-store';
+
+/** Configuration for the auto row size manager. */
+export interface AutoRowSizeConfig {
+  /** Batch size for off-screen async measurement. Default: 100. */
+  batchSize?: number;
+  /** Minimum row height (prevents rows from collapsing). Default: the grid's default row height. */
+  minRowHeight?: number;
+  /** Vertical padding to add to measured height per row. Default: 8. */
+  cellPadding?: number;
+}
+
+/** Callback to apply measured heights into the engine. */
+export type ApplyHeightsCallback = (updates: Map<number, number>) => void;
+
+/**
+ * Measurement state for progressive off-screen measurement.
+ * Tracks which row we're up to in the async sweep.
+ */
+interface AsyncMeasurementState {
+  /** Next row index to measure. */
+  nextRow: number;
+  /** Total row count at the time measurement started. */
+  totalRows: number;
+  /** requestIdleCallback handle for cancellation. */
+  idleCallbackId: number;
+}
+
+export class AutoRowSizeManager {
+  private readonly batchSize: number;
+  private readonly minRowHeight: number;
+  private readonly cellPadding: number;
+  private readonly applyHeights: ApplyHeightsCallback;
+
+  /** Render layers that can contribute height measurements. */
+  private layers: RenderLayer[] = [];
+
+  /** Current async measurement sweep (null when idle). */
+  private asyncState: AsyncMeasurementState | null = null;
+
+  /** Whether the manager has been destroyed. */
+  private destroyed = false;
+
+  /** Rows that need re-measurement. Empty = nothing dirty. */
+  private readonly dirtyRows = new Set<number>();
+
+  /** When true, all rows should be re-measured (e.g. theme/font change). */
+  private allDirty = false;
+
+  constructor(config: AutoRowSizeConfig, applyHeights: ApplyHeightsCallback) {
+    this.batchSize = config.batchSize ?? 100;
+    this.minRowHeight = config.minRowHeight ?? 28;
+    this.cellPadding = config.cellPadding ?? 8;
+    this.applyHeights = applyHeights;
+  }
+
+  /** Set the render layers to collect height measurements from. */
+  setLayers(layers: RenderLayer[]): void {
+    this.layers = layers;
+  }
+
+  // --- Dirty tracking ---
+
+  /** Mark specific rows as needing re-measurement. */
+  markDirtyRows(rows: Iterable<number>): void {
+    for (const row of rows) {
+      this.dirtyRows.add(row);
+    }
+  }
+
+  /** Mark all rows as dirty (theme/font change, or first load). */
+  markAllDirty(): void {
+    this.allDirty = true;
+  }
+
+  /** Clear dirty state. */
+  clearDirty(): void {
+    this.dirtyRows.clear();
+    this.allDirty = false;
+  }
+
+  /** Whether there are any dirty rows pending measurement. */
+  get hasDirtyRows(): boolean {
+    return this.allDirty || this.dirtyRows.size > 0;
+  }
+
+  /** Number of individually dirty rows (not counting allDirty). */
+  get dirtyRowCount(): number {
+    return this.dirtyRows.size;
+  }
+
+  /** Whether all rows are marked dirty. */
+  get isAllDirty(): boolean {
+    return this.allDirty;
+  }
+
+  /** Check if a specific row is dirty. */
+  isRowDirty(row: number): boolean {
+    return this.allDirty || this.dirtyRows.has(row);
+  }
+
+  /**
+   * Measure visible rows synchronously using the current render context.
+   * Called after each render to keep viewport heights up to date.
+   * Returns the number of rows that were updated.
+   */
+  measureViewport(rc: RenderContext, rowStore: RowStore): number {
+    if (this.destroyed) return 0;
+
+    const heights = this.collectHeights(rc);
+    if (heights.size === 0) return 0;
+
+    // Apply min height and padding, skip manual overrides
+    const updates = new Map<number, number>();
+    const defaultH = this.minRowHeight;
+    for (const [row, measuredH] of heights) {
+      if (rowStore.isManual(row)) continue;
+      const h = Math.max(measuredH + this.cellPadding, defaultH);
+      updates.set(row, h);
+    }
+
+    if (updates.size === 0) return 0;
+    this.applyHeights(updates);
+
+    // Clear dirty status for measured rows
+    for (const row of updates.keys()) {
+      this.dirtyRows.delete(row);
+    }
+
+    return updates.size;
+  }
+
+  /**
+   * Start a full async measurement sweep for all rows.
+   * Measures in batches via requestIdleCallback, skipping rows with
+   * manual overrides.
+   *
+   * @param totalRows Total number of rows in the dataset
+   * @param buildRenderContext Factory that builds a RenderContext for a given row range
+   * @param rowStore RowStore for manual override checks
+   */
+  startAsyncMeasurement(
+    totalRows: number,
+    buildRenderContext: (startRow: number, endRow: number) => RenderContext | null,
+    rowStore: RowStore,
+  ): void {
+    if (this.destroyed) return;
+    this.cancelAsyncMeasurement();
+
+    if (totalRows === 0) return;
+
+    const processNextBatch = (_deadline: IdleDeadline): void => {
+      if (this.destroyed || !this.asyncState) return;
+
+      const state = this.asyncState;
+      const batchEnd = Math.min(state.nextRow + this.batchSize, state.totalRows);
+
+      if (state.nextRow >= state.totalRows) {
+        this.asyncState = null;
+        return;
+      }
+
+      const rc = buildRenderContext(state.nextRow, batchEnd - 1);
+      if (rc) {
+        const heights = this.collectHeights(rc);
+        if (heights.size > 0) {
+          const updates = new Map<number, number>();
+          const defaultH = this.minRowHeight;
+          for (const [row, measuredH] of heights) {
+            if (rowStore.isManual(row)) continue;
+            const h = Math.max(measuredH + this.cellPadding, defaultH);
+            updates.set(row, h);
+          }
+          if (updates.size > 0) {
+            this.applyHeights(updates);
+          }
+          // Clear dirty status for measured rows
+          for (const row of updates.keys()) {
+            this.dirtyRows.delete(row);
+          }
+        }
+      }
+
+      state.nextRow = batchEnd;
+
+      if (state.nextRow < state.totalRows) {
+        state.idleCallbackId = requestIdleCallback(processNextBatch);
+      } else {
+        this.asyncState = null;
+        this.allDirty = false;
+      }
+    };
+
+    this.asyncState = {
+      nextRow: 0,
+      totalRows,
+      idleCallbackId: requestIdleCallback(processNextBatch),
+    };
+  }
+
+  /**
+   * Start an async measurement sweep for only dirty rows.
+   * More efficient than full sweep when few rows changed.
+   *
+   * @param buildRenderContext Factory that builds a RenderContext for a given row range
+   * @param rowStore RowStore for manual override checks
+   */
+  startDirtyMeasurement(
+    buildRenderContext: (startRow: number, endRow: number) => RenderContext | null,
+    rowStore: RowStore,
+  ): void {
+    if (this.destroyed || this.dirtyRows.size === 0) return;
+    this.cancelAsyncMeasurement();
+
+    // Sort dirty rows for sequential access pattern
+    const sortedDirty = Array.from(this.dirtyRows).sort((a, b) => a - b);
+    let idx = 0;
+
+    const processNextBatch = (_deadline: IdleDeadline): void => {
+      if (this.destroyed || idx >= sortedDirty.length) {
+        this.asyncState = null;
+        return;
+      }
+
+      const batchEnd = Math.min(idx + this.batchSize, sortedDirty.length);
+      const batchRows = sortedDirty.slice(idx, batchEnd);
+      const startRow = batchRows[0];
+      const endRow = batchRows[batchRows.length - 1];
+
+      const rc = buildRenderContext(startRow, endRow);
+      if (rc) {
+        const heights = this.collectHeights(rc);
+        if (heights.size > 0) {
+          const updates = new Map<number, number>();
+          const defaultH = this.minRowHeight;
+          for (const [row, measuredH] of heights) {
+            if (rowStore.isManual(row)) continue;
+            const h = Math.max(measuredH + this.cellPadding, defaultH);
+            updates.set(row, h);
+          }
+          if (updates.size > 0) {
+            this.applyHeights(updates);
+          }
+        }
+      }
+
+      // Clear measured rows from dirty set
+      for (const row of batchRows) {
+        this.dirtyRows.delete(row);
+      }
+
+      idx = batchEnd;
+
+      if (idx < sortedDirty.length) {
+        this.asyncState = {
+          nextRow: idx,
+          totalRows: sortedDirty.length,
+          idleCallbackId: requestIdleCallback(processNextBatch),
+        };
+      } else {
+        this.asyncState = null;
+      }
+    };
+
+    this.asyncState = {
+      nextRow: 0,
+      totalRows: sortedDirty.length,
+      idleCallbackId: requestIdleCallback(processNextBatch),
+    };
+  }
+
+  /** Cancel any in-progress async measurement sweep. */
+  cancelAsyncMeasurement(): void {
+    if (this.asyncState) {
+      cancelIdleCallback(this.asyncState.idleCallbackId);
+      this.asyncState = null;
+    }
+  }
+
+  /** Whether an async measurement sweep is in progress. */
+  get isMeasuring(): boolean {
+    return this.asyncState !== null;
+  }
+
+  /** Progress of the current async sweep (0..1). Returns 1 if not measuring. */
+  get progress(): number {
+    if (!this.asyncState) return 1;
+    const { nextRow, totalRows } = this.asyncState;
+    return totalRows > 0 ? nextRow / totalRows : 1;
+  }
+
+  /** Clean up all resources. */
+  destroy(): void {
+    this.cancelAsyncMeasurement();
+    this.layers = [];
+    this.dirtyRows.clear();
+    this.allDirty = false;
+    this.destroyed = true;
+  }
+
+  /**
+   * Collect height measurements from all registered render layers.
+   * For each row, takes the maximum height across all layers.
+   */
+  private collectHeights(rc: RenderContext): Map<number, number> {
+    const result = new Map<number, number>();
+
+    for (const layer of this.layers) {
+      if (!layer.measureHeights) continue;
+
+      const layerHeights = layer.measureHeights(rc);
+      for (const [row, height] of layerHeights) {
+        const current = result.get(row);
+        if (current === undefined || height > current) {
+          result.set(row, height);
+        }
+      }
+    }
+
+    return result;
+  }
+}
diff --git a/packages/core/src/autofill/autofill-manager.ts b/packages/core/src/autofill/autofill-manager.ts
index cfd5d15..e6b96ef 100644
--- a/packages/core/src/autofill/autofill-manager.ts
+++ b/packages/core/src/autofill/autofill-manager.ts
@@ -54,7 +54,6 @@ export class AutofillManager {
   private readonly eventBus: EventBus;
   private readonly dirtyTracker: DirtyTracker;
   private readonly renderScheduler: RenderScheduler;
-  private readonly container: HTMLElement;
   private readonly rowCount: number;
   private readonly colCount: number;
   private readonly mergeManager?: MergeManager;
@@ -76,7 +75,6 @@ export class AutofillManager {
     this.eventBus = config.eventBus;
     this.dirtyTracker = config.dirtyTracker;
     this.renderScheduler = config.renderScheduler;
-    this.container = config.container;
     this.rowCount = config.rowCount;
     this.colCount = config.colCount;
     this.mergeManager = config.mergeManager;
diff --git a/packages/core/src/benchmark/performance-benchmark.ts b/packages/core/src/benchmark/performance-benchmark.ts
index f6e7600..a1dd18f 100644
--- a/packages/core/src/benchmark/performance-benchmark.ts
+++ b/packages/core/src/benchmark/performance-benchmark.ts
@@ -2,10 +2,10 @@
 // Copyright (c) 2025 witqq contributors
 
 /**
- * PerformanceBenchmark — utility for measuring init time, scroll FPS, and memory.
+ * PerformanceBenchmark — utilities for measuring spreadsheet performance.
  *
- * Used for development benchmarking and CI performance regression checks.
- * Not included in production bundle (test/dev only).
+ * Provides timing, FPS counting, multi-run statistics, and a benchmark runner
+ * that outputs structured JSON results.
  */
 
 export interface BenchmarkResult {
@@ -32,18 +32,122 @@ export interface FPSResult {
   durationMs: number;
 }
 
+/** Result of a single timing measurement */
+export interface TimingResult {
+  /** Elapsed time in milliseconds */
+  timeMs: number;
+}
+
+/** Statistical summary of multiple runs */
+export interface RunStats {
+  /** Median time across runs (ms) */
+  medianMs: number;
+  /** Mean time across runs (ms) */
+  meanMs: number;
+  /** Minimum time across runs (ms) */
+  minMs: number;
+  /** Maximum time across runs (ms) */
+  maxMs: number;
+  /** Coefficient of variation (stddev / mean) as fraction 0..1 */
+  cv: number;
+  /** All individual run times (ms) */
+  runs: number[];
+}
+
+/** Result of a single benchmark operation */
+export interface BenchmarkMetric {
+  /** Human-readable metric name */
+  name: string;
+  /** Dataset size label (e.g. "1K", "10K", "100K") */
+  dataset: string;
+  /** Statistical summary */
+  stats: RunStats;
+  /** Unit of measurement */
+  unit: string;
+}
+
+/** Full benchmark suite output */
+export interface BenchmarkSuiteResult {
+  /** Timestamp of the run */
+  timestamp: string;
+  /** All collected metrics */
+  metrics: BenchmarkMetric[];
+}
+
 /**
- * Measure execution time of a factory function.
+ * Measure execution time of a synchronous function.
  */
-export function measureInitTime(
-  factory: () => void,
-): { timeMs: number } {
+export function measureInitTime(factory: () => void): TimingResult {
   const start = performance.now();
   factory();
   const end = performance.now();
   return { timeMs: end - start };
 }
 
+/**
+ * Run a function multiple times and return statistical summary.
+ * Includes a warmup run that is discarded.
+ */
+export function measureMultiRun(fn: () => void, runs: number = 3): RunStats {
+  // Warmup (discarded)
+  fn();
+
+  const times: number[] = [];
+  for (let i = 0; i < runs; i++) {
+    const start = performance.now();
+    fn();
+    times.push(performance.now() - start);
+  }
+  return computeStats(times);
+}
+
+/**
+ * Compute statistical summary from an array of timing values.
+ */
+export function computeStats(times: number[]): RunStats {
+  if (times.length === 0) {
+    return { medianMs: 0, meanMs: 0, minMs: 0, maxMs: 0, cv: 0, runs: [] };
+  }
+
+  const sorted = [...times].sort((a, b) => a - b);
+  const n = sorted.length;
+  const mean = sorted.reduce((a, b) => a + b, 0) / n;
+
+  const mid = Math.floor(n / 2);
+  const median = n % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+
+  const variance = sorted.reduce((acc, t) => acc + (t - mean) ** 2, 0) / n;
+  const stddev = Math.sqrt(variance);
+  const cv = mean > 0 ? stddev / mean : 0;
+
+  return {
+    medianMs: median,
+    meanMs: mean,
+    minMs: sorted[0],
+    maxMs: sorted[n - 1],
+    cv,
+    runs: times,
+  };
+}
+
+/**
+ * Measure throughput: how many operations per second.
+ */
+export function measureThroughput(
+  fn: () => void,
+  iterations: number,
+): { opsPerSec: number; totalMs: number } {
+  const start = performance.now();
+  for (let i = 0; i < iterations; i++) {
+    fn();
+  }
+  const totalMs = performance.now() - start;
+  return {
+    opsPerSec: (iterations / totalMs) * 1000,
+    totalMs,
+  };
+}
+
 /**
  * FPS counter — call tick() on each rAF, read results after measurement window.
  */
@@ -90,3 +194,28 @@ export class FPSCounter {
     };
   }
 }
+
+/**
+ * Benchmark runner that collects metrics and produces JSON output.
+ */
+export class BenchmarkRunner {
+  private metrics: BenchmarkMetric[] = [];
+
+  /** Record a multi-run benchmark result */
+  record(name: string, dataset: string, stats: RunStats, unit: string = 'ms'): void {
+    this.metrics.push({ name, dataset, stats, unit });
+  }
+
+  /** Get all collected metrics as a structured result */
+  toJSON(): BenchmarkSuiteResult {
+    return {
+      timestamp: new Date().toISOString(),
+      metrics: this.metrics,
+    };
+  }
+
+  /** Reset all collected metrics */
+  reset(): void {
+    this.metrics = [];
+  }
+}
diff --git a/packages/core/src/clipboard/index.ts b/packages/core/src/clipboard/index.ts
index dab271e..fa35685 100644
--- a/packages/core/src/clipboard/index.ts
+++ b/packages/core/src/clipboard/index.ts
@@ -3,9 +3,4 @@
 
 export { ClipboardManager } from './clipboard-manager';
 export type { ClipboardManagerConfig } from './clipboard-manager';
-export {
-  serializeToTSV,
-  serializeToHTML,
-  parseTSV,
-  parseHTML,
-} from './clipboard-serializer';
+export { serializeToTSV, serializeToHTML, parseTSV, parseHTML } from './clipboard-serializer';
diff --git a/packages/core/src/commands/batch-cell-edit-command.ts b/packages/core/src/commands/batch-cell-edit-command.ts
index a3c738b..98719d4 100644
--- a/packages/core/src/commands/batch-cell-edit-command.ts
+++ b/packages/core/src/commands/batch-cell-edit-command.ts
@@ -26,7 +26,12 @@ export class BatchCellEditCommand implements Command {
     this.description = `Batch edit (${edits.length} cells)`;
   }
 
-  get affectedCells(): ReadonlyArray<{ row: number; col: number; oldValue: CellValue; newValue: CellValue }> {
+  get affectedCells(): ReadonlyArray<{
+    row: number;
+    col: number;
+    oldValue: CellValue;
+    newValue: CellValue;
+  }> {
     return this.edits;
   }
 
diff --git a/packages/core/src/commands/cell-edit-command.ts b/packages/core/src/commands/cell-edit-command.ts
index 93af958..67a0c16 100644
--- a/packages/core/src/commands/cell-edit-command.ts
+++ b/packages/core/src/commands/cell-edit-command.ts
@@ -22,7 +22,12 @@ export class CellEditCommand implements Command {
     this.description = `Edit cell (${row}, ${col})`;
   }
 
-  get affectedCells(): ReadonlyArray<{ row: number; col: number; oldValue: CellValue; newValue: CellValue }> {
+  get affectedCells(): ReadonlyArray<{
+    row: number;
+    col: number;
+    oldValue: CellValue;
+    newValue: CellValue;
+  }> {
     return [{ row: this.row, col: this.col, oldValue: this.oldValue, newValue: this.newValue }];
   }
 
diff --git a/packages/core/src/commands/merge-commands.ts b/packages/core/src/commands/merge-commands.ts
index 73a8b6b..3501a4b 100644
--- a/packages/core/src/commands/merge-commands.ts
+++ b/packages/core/src/commands/merge-commands.ts
@@ -82,7 +82,7 @@ export class UnmergeCellsCommand implements Command {
 
   constructor(
     private readonly mergeManager: MergeManager,
-    private readonly cellStore: CellStore,
+    _cellStore: CellStore,
     private readonly region: MergedRegion,
   ) {
     this.description = `Unmerge cells (${region.startRow},${region.startCol})-(${region.endRow},${region.endCol})`;
diff --git a/packages/core/src/commands/row-commands.ts b/packages/core/src/commands/row-commands.ts
index 661c199..974fbe3 100644
--- a/packages/core/src/commands/row-commands.ts
+++ b/packages/core/src/commands/row-commands.ts
@@ -23,7 +23,10 @@ export interface RowCommandDeps {
   getRowCount: () => number;
 }
 
-function collectCellsFromRow(cellStore: CellStore, startRow: number): Array<{ row: number; col: number; data: CellData }> {
+function collectCellsFromRow(
+  cellStore: CellStore,
+  startRow: number,
+): Array<{ row: number; col: number; data: CellData }> {
   const result: Array<{ row: number; col: number; data: CellData }> = [];
   for (const entry of cellStore.entries()) {
     if (entry.row >= startRow) {
@@ -34,7 +37,10 @@ function collectCellsFromRow(cellStore: CellStore, startRow: number): Array<{ ro
   return result;
 }
 
-function collectRowCells(cellStore: CellStore, row: number): Array<{ col: number; data: CellData }> {
+function collectRowCells(
+  cellStore: CellStore,
+  row: number,
+): Array<{ col: number; data: CellData }> {
   const result: Array<{ col: number; data: CellData }> = [];
   for (const entry of cellStore.entries()) {
     if (entry.row === row) {
@@ -53,9 +59,19 @@ function shiftMergesForInsert(mgr: MergeManager, targetRow: number): MergedRegio
   for (const r of regions) {
     saved.push({ ...r });
     if (r.startRow >= targetRow) {
-      newRegions.push({ startRow: r.startRow + 1, startCol: r.startCol, endRow: r.endRow + 1, endCol: r.endCol });
+      newRegions.push({
+        startRow: r.startRow + 1,
+        startCol: r.startCol,
+        endRow: r.endRow + 1,
+        endCol: r.endCol,
+      });
     } else if (r.endRow >= targetRow) {
-      newRegions.push({ startRow: r.startRow, startCol: r.startCol, endRow: r.endRow + 1, endCol: r.endCol });
+      newRegions.push({
+        startRow: r.startRow,
+        startCol: r.startCol,
+        endRow: r.endRow + 1,
+        endCol: r.endCol,
+      });
     } else {
       newRegions.push({ ...r });
     }
@@ -83,16 +99,31 @@ function shiftMergesForDelete(mgr: MergeManager, targetRow: number): MergedRegio
   for (const r of regions) {
     saved.push({ ...r });
     if (r.startRow > targetRow) {
-      newRegions.push({ startRow: r.startRow - 1, startCol: r.startCol, endRow: r.endRow - 1, endCol: r.endCol });
+      newRegions.push({
+        startRow: r.startRow - 1,
+        startCol: r.startCol,
+        endRow: r.endRow - 1,
+        endCol: r.endCol,
+      });
     } else if (r.startRow === targetRow && r.endRow === targetRow) {
       // Single-row merge at target — removed entirely
     } else if (r.endRow >= targetRow && r.startRow < targetRow) {
       if (r.endRow - 1 > r.startRow || r.endCol > r.startCol) {
-        newRegions.push({ startRow: r.startRow, startCol: r.startCol, endRow: r.endRow - 1, endCol: r.endCol });
+        newRegions.push({
+          startRow: r.startRow,
+          startCol: r.startCol,
+          endRow: r.endRow - 1,
+          endCol: r.endCol,
+        });
       }
     } else if (r.startRow === targetRow && r.endRow > targetRow) {
       if (r.endRow - 1 >= r.startRow) {
-        newRegions.push({ startRow: r.startRow, startCol: r.startCol, endRow: r.endRow - 1, endCol: r.endCol });
+        newRegions.push({
+          startRow: r.startRow,
+          startCol: r.startCol,
+          endRow: r.endRow - 1,
+          endCol: r.endCol,
+        });
       }
     } else {
       newRegions.push({ ...r });
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
new file mode 100644
index 0000000..6f79073
--- /dev/null
+++ b/packages/core/src/constants.ts
@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/** Line height multiplier relative to em-height for wrapped text rendering. */
+export const LINE_HEIGHT_MULTIPLIER = 1.2;
diff --git a/packages/core/src/context-menu/context-menu-manager.ts b/packages/core/src/context-menu/context-menu-manager.ts
index e0b4fe6..9d6a53e 100644
--- a/packages/core/src/context-menu/context-menu-manager.ts
+++ b/packages/core/src/context-menu/context-menu-manager.ts
@@ -6,12 +6,15 @@
  *
  * Subscribes to gridContextMenu events, renders a positioned DOM menu,
  * filters items by region context, and supports extensible item registration.
+ * Supports recursive submenus with keyboard navigation and empty menu prevention.
  */
 
 import type { EventBus } from '../events/event-bus';
 import type { GridMouseEvent } from '../events/event-types';
 import type { SpreadsheetTheme } from '../themes/theme-types';
 import type { SpreadsheetEngine } from '../engine/spreadsheet-engine';
+import type { ResolvedLocale } from '../locale/resolve-locale';
+import { createDefaultMenuItems } from './default-items';
 
 export type MenuContext = 'cell' | 'header' | 'row-number' | 'corner';
 
@@ -29,7 +32,8 @@ export interface ContextMenuItem {
   readonly shortcut?: string;
   readonly separator?: boolean;
   readonly contexts: ReadonlyArray<MenuContext>;
-  action: (ctx: MenuActionContext) => void;
+  readonly submenu?: ReadonlyArray<ContextMenuItem>;
+  action?: (ctx: MenuActionContext) => void;
   isDisabled?: (ctx: MenuActionContext) => boolean;
   isVisible?: (ctx: MenuActionContext) => boolean;
 }
@@ -41,17 +45,26 @@ export interface ContextMenuManagerConfig {
   theme: SpreadsheetTheme;
 }
 
+interface MenuLevel {
+  element: HTMLDivElement;
+  items: ContextMenuItem[];
+  focusedIndex: number;
+}
+
+const SUBMENU_OPEN_DELAY = 200;
+const SUBMENU_CLOSE_DELAY = 150;
+
 export class ContextMenuManager {
   private readonly container: HTMLElement;
   private readonly engine: SpreadsheetEngine;
   private readonly eventBus: EventBus;
   private theme: SpreadsheetTheme;
   private readonly items: Map<string, ContextMenuItem> = new Map();
-  private menuElement: HTMLDivElement | null = null;
-  private focusedIndex = -1;
-  private visibleItems: ContextMenuItem[] = [];
+  private menuStack: MenuLevel[] = [];
   private currentContext: MenuActionContext | null = null;
   private outsideClickTimer: ReturnType<typeof setTimeout> | null = null;
+  private submenuOpenTimer: ReturnType<typeof setTimeout> | null = null;
+  private submenuCloseTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor(config: ContextMenuManagerConfig) {
     this.container = config.container;
@@ -79,7 +92,7 @@ export class ContextMenuManager {
 
   /** Whether the context menu is currently open. */
   get isOpen(): boolean {
-    return this.menuElement !== null;
+    return this.menuStack.length > 0;
   }
 
   /** Update theme for runtime theme switching. */
@@ -87,24 +100,43 @@ export class ContextMenuManager {
     this.theme = theme;
   }
 
+  /** Update locale for runtime locale switching. Replaces default items with new locale strings. */
+  setLocale(locale: ResolvedLocale): void {
+    // Remove old default items and re-register with new locale
+    const defaultIds = new Set([
+      'cut',
+      'copy',
+      'paste',
+      'sort-asc',
+      'sort-desc',
+      'insert-row-above',
+      'insert-row-below',
+      'delete-row',
+    ]);
+    for (const id of defaultIds) {
+      this.items.delete(id);
+    }
+    for (const item of createDefaultMenuItems(locale)) {
+      this.items.set(item.id, item);
+    }
+  }
+
   /** Close the menu if open. */
   close(): void {
-    if (this.outsideClickTimer !== null) {
-      clearTimeout(this.outsideClickTimer);
-      this.outsideClickTimer = null;
-    }
+    this.clearTimers();
 
-    if (!this.menuElement) return;
+    if (this.menuStack.length === 0) return;
 
-    this.menuElement.removeEventListener('keydown', this.handleKeyDown);
+    this.menuStack[0].element.removeEventListener('keydown', this.handleKeyDown);
     document.removeEventListener('mousedown', this.handleOutsideClick);
 
-    if (this.menuElement.parentNode) {
-      this.menuElement.parentNode.removeChild(this.menuElement);
+    for (const level of this.menuStack) {
+      if (level.element.parentNode) {
+        level.element.parentNode.removeChild(level.element);
+      }
     }
-    this.menuElement = null;
-    this.focusedIndex = -1;
-    this.visibleItems = [];
+
+    this.menuStack = [];
     this.currentContext = null;
   }
 
@@ -114,13 +146,56 @@ export class ContextMenuManager {
     this.eventBus.off('gridContextMenu', this.handleContextMenu);
   }
 
+  private clearTimers(): void {
+    if (this.outsideClickTimer !== null) {
+      clearTimeout(this.outsideClickTimer);
+      this.outsideClickTimer = null;
+    }
+    if (this.submenuOpenTimer !== null) {
+      clearTimeout(this.submenuOpenTimer);
+      this.submenuOpenTimer = null;
+    }
+    if (this.submenuCloseTimer !== null) {
+      clearTimeout(this.submenuCloseTimer);
+      this.submenuCloseTimer = null;
+    }
+  }
+
+  /** Check if an item has at least one visible child (recursive). */
+  private hasVisibleChildren(item: ContextMenuItem, ctx: MenuActionContext): boolean {
+    if (!item.submenu || item.submenu.length === 0) return false;
+    for (const child of item.submenu) {
+      if (child.isVisible && !child.isVisible(ctx)) continue;
+      if (child.submenu && child.submenu.length > 0) {
+        if (this.hasVisibleChildren(child, ctx)) return true;
+      } else {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /** Filter items for display — applies context, visibility, and empty submenu checks. */
+  private filterItems(
+    items: Iterable<ContextMenuItem>,
+    ctx: MenuActionContext,
+    menuContext?: MenuContext,
+  ): ContextMenuItem[] {
+    const result: ContextMenuItem[] = [];
+    for (const item of items) {
+      if (menuContext && !item.contexts.includes(menuContext)) continue;
+      if (item.isVisible && !item.isVisible(ctx)) continue;
+      if (item.submenu && item.submenu.length > 0 && !this.hasVisibleChildren(item, ctx)) continue;
+      result.push(item);
+    }
+    return result;
+  }
+
   private handleContextMenu = (event: GridMouseEvent): void => {
     event.originalEvent.preventDefault();
 
-    // Close any existing menu
     this.close();
 
-    // Map the hit region to a MenuContext
     const menuContext = this.regionToMenuContext(event.region);
     if (!menuContext) return;
 
@@ -132,46 +207,20 @@ export class ContextMenuManager {
     };
     this.currentContext = ctx;
 
-    // Filter items for this context
-    this.visibleItems = [];
-    for (const item of this.items.values()) {
-      if (!item.contexts.includes(menuContext)) continue;
-      if (item.isVisible && !item.isVisible(ctx)) continue;
-      this.visibleItems.push(item);
-    }
-
-    if (this.visibleItems.length === 0) return;
-
-    // Create menu DOM
-    this.menuElement = document.createElement('div');
-    this.styleMenu(this.menuElement);
+    const visibleItems = this.filterItems(this.items.values(), ctx, menuContext);
+    if (visibleItems.length === 0) return;
 
-    for (let i = 0; i < this.visibleItems.length; i++) {
-      const item = this.visibleItems[i];
-      const disabled = item.isDisabled ? item.isDisabled(ctx) : false;
-      const row = this.createMenuItemElement(item, i, disabled);
-      this.menuElement.appendChild(row);
-
-      if (item.separator && i < this.visibleItems.length - 1) {
-        const sep = document.createElement('div');
-        sep.style.height = '1px';
-        sep.style.backgroundColor = this.theme.colors.gridLine;
-        sep.style.margin = '4px 0';
-        this.menuElement.appendChild(sep);
-      }
-    }
+    const rootElement = this.buildMenuPanel(visibleItems, ctx, 0);
+    this.container.appendChild(rootElement);
 
-    this.container.appendChild(this.menuElement);
+    this.menuStack.push({ element: rootElement, items: visibleItems, focusedIndex: -1 });
 
-    // Position at mouse coordinates, clamped to container
-    this.positionMenu(event.originalEvent.clientX, event.originalEvent.clientY);
+    this.positionMenuAtPoint(rootElement, event.originalEvent.clientX, event.originalEvent.clientY);
 
-    // Focus for keyboard navigation
-    this.menuElement.setAttribute('tabindex', '-1');
-    this.menuElement.focus();
-    this.menuElement.addEventListener('keydown', this.handleKeyDown);
+    rootElement.setAttribute('tabindex', '-1');
+    rootElement.focus();
+    rootElement.addEventListener('keydown', this.handleKeyDown);
 
-    // Dismiss on outside click (use setTimeout so the current event doesn't trigger it)
     this.outsideClickTimer = setTimeout(() => {
       this.outsideClickTimer = null;
       document.addEventListener('mousedown', this.handleOutsideClick);
@@ -195,6 +244,34 @@ export class ContextMenuManager {
     }
   }
 
+  private buildMenuPanel(
+    items: ContextMenuItem[],
+    ctx: MenuActionContext,
+    depth: number,
+  ): HTMLDivElement {
+    const panel = document.createElement('div');
+    this.styleMenu(panel);
+    panel.dataset.menuDepth = String(depth);
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const disabled = item.isDisabled ? item.isDisabled(ctx) : false;
+      const hasSubmenu = !!(item.submenu && item.submenu.length > 0);
+      const row = this.createMenuItemElement(item, i, disabled, hasSubmenu, depth);
+      panel.appendChild(row);
+
+      if (item.separator && i < items.length - 1) {
+        const sep = document.createElement('div');
+        sep.style.height = '1px';
+        sep.style.backgroundColor = this.theme.colors.gridLine;
+        sep.style.margin = '4px 0';
+        panel.appendChild(sep);
+      }
+    }
+
+    return panel;
+  }
+
   private styleMenu(el: HTMLDivElement): void {
     const s = el.style;
     s.position = 'absolute';
@@ -213,9 +290,16 @@ export class ContextMenuManager {
     s.userSelect = 'none';
   }
 
-  private createMenuItemElement(item: ContextMenuItem, index: number, disabled: boolean): HTMLDivElement {
+  private createMenuItemElement(
+    item: ContextMenuItem,
+    index: number,
+    disabled: boolean,
+    hasSubmenu: boolean,
+    depth: number,
+  ): HTMLDivElement {
     const row = document.createElement('div');
     row.dataset.index = String(index);
+    row.dataset.depth = String(depth);
 
     const s = row.style;
     s.display = 'flex';
@@ -225,7 +309,6 @@ export class ContextMenuManager {
     s.opacity = disabled ? '0.4' : '1';
     s.gap = '8px';
 
-    // Icon
     if (item.icon) {
       const iconSpan = document.createElement('span');
       iconSpan.textContent = item.icon;
@@ -234,14 +317,19 @@ export class ContextMenuManager {
       row.appendChild(iconSpan);
     }
 
-    // Label
     const labelSpan = document.createElement('span');
     labelSpan.textContent = item.label;
     labelSpan.style.flex = '1';
     row.appendChild(labelSpan);
 
-    // Shortcut
-    if (item.shortcut) {
+    if (hasSubmenu) {
+      const chevron = document.createElement('span');
+      chevron.textContent = '▸';
+      chevron.style.marginLeft = '8px';
+      chevron.style.opacity = '0.6';
+      chevron.dataset.chevron = 'true';
+      row.appendChild(chevron);
+    } else if (item.shortcut) {
       const shortcutSpan = document.createElement('span');
       shortcutSpan.textContent = item.shortcut;
       shortcutSpan.style.marginLeft = '24px';
@@ -252,33 +340,120 @@ export class ContextMenuManager {
 
     if (!disabled) {
       row.addEventListener('mouseenter', () => {
-        this.setFocused(index);
+        this.handleItemMouseEnter(depth, index, hasSubmenu);
       });
       row.addEventListener('mouseleave', () => {
-        row.style.backgroundColor = '';
+        this.handleItemMouseLeave(depth, index, hasSubmenu);
       });
       row.addEventListener('click', (e) => {
         e.stopPropagation();
-        this.executeItem(index);
+        if (hasSubmenu) {
+          this.openSubmenu(depth, index);
+        } else {
+          this.executeItem(depth, index);
+        }
       });
     }
 
     return row;
   }
 
-  private positionMenu(clientX: number, clientY: number): void {
-    if (!this.menuElement) return;
+  private handleItemMouseEnter(depth: number, index: number, hasSubmenu: boolean): void {
+    if (this.submenuCloseTimer !== null) {
+      clearTimeout(this.submenuCloseTimer);
+      this.submenuCloseTimer = null;
+    }
 
+    this.setFocused(depth, index);
+
+    // Close deeper submenus immediately when hovering a different item
+    this.closeSubmenusFrom(depth + 1);
+
+    if (hasSubmenu) {
+      if (this.submenuOpenTimer !== null) {
+        clearTimeout(this.submenuOpenTimer);
+        this.submenuOpenTimer = null;
+      }
+      this.submenuOpenTimer = setTimeout(() => {
+        this.submenuOpenTimer = null;
+        this.openSubmenu(depth, index);
+      }, SUBMENU_OPEN_DELAY);
+    }
+  }
+
+  private handleItemMouseLeave(depth: number, _index: number, hasSubmenu: boolean): void {
+    if (hasSubmenu) {
+      if (this.submenuOpenTimer !== null) {
+        clearTimeout(this.submenuOpenTimer);
+        this.submenuOpenTimer = null;
+      }
+      this.submenuCloseTimer = setTimeout(() => {
+        this.submenuCloseTimer = null;
+        this.closeSubmenusFrom(depth + 1);
+      }, SUBMENU_CLOSE_DELAY);
+    }
+  }
+
+  private openSubmenu(parentDepth: number, itemIndex: number): void {
+    if (!this.currentContext) return;
+
+    const parentLevel = this.menuStack[parentDepth];
+    if (!parentLevel) return;
+
+    const parentItem = parentLevel.items[itemIndex];
+    if (!parentItem?.submenu || parentItem.submenu.length === 0) return;
+
+    // If a submenu is already open at this depth+1, close it first
+    this.closeSubmenusFrom(parentDepth + 1);
+
+    const visibleChildren = this.filterItems(parentItem.submenu, this.currentContext);
+    if (visibleChildren.length === 0) return;
+
+    const childDepth = parentDepth + 1;
+    const childPanel = this.buildMenuPanel(visibleChildren, this.currentContext, childDepth);
+    this.container.appendChild(childPanel);
+
+    this.positionSubmenu(childPanel, parentLevel.element, itemIndex);
+
+    this.menuStack.push({ element: childPanel, items: visibleChildren, focusedIndex: -1 });
+
+    // Prevent submenu from stealing focus from root menu
+    childPanel.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+    });
+
+    childPanel.addEventListener('mouseenter', () => {
+      if (this.submenuCloseTimer !== null) {
+        clearTimeout(this.submenuCloseTimer);
+        this.submenuCloseTimer = null;
+      }
+    });
+    childPanel.addEventListener('mouseleave', () => {
+      this.submenuCloseTimer = setTimeout(() => {
+        this.submenuCloseTimer = null;
+        this.closeSubmenusFrom(childDepth);
+      }, SUBMENU_CLOSE_DELAY);
+    });
+  }
+
+  private closeSubmenusFrom(depth: number): void {
+    while (this.menuStack.length > depth) {
+      const level = this.menuStack.pop()!;
+      if (level.element.parentNode) {
+        level.element.parentNode.removeChild(level.element);
+      }
+    }
+  }
+
+  private positionMenuAtPoint(menuEl: HTMLDivElement, clientX: number, clientY: number): void {
     const containerRect = this.container.getBoundingClientRect();
     let x = clientX - containerRect.left;
     let y = clientY - containerRect.top;
 
-    // Measure menu size
-    const menuRect = this.menuElement.getBoundingClientRect();
+    const menuRect = menuEl.getBoundingClientRect();
     const menuWidth = menuRect.width;
     const menuHeight = menuRect.height;
 
-    // Clamp to container
     if (x + menuWidth > containerRect.width) {
       x = containerRect.width - menuWidth;
     }
@@ -288,86 +463,169 @@ export class ContextMenuManager {
     if (x < 0) x = 0;
     if (y < 0) y = 0;
 
-    this.menuElement.style.left = `${x}px`;
-    this.menuElement.style.top = `${y}px`;
+    menuEl.style.left = `${x}px`;
+    menuEl.style.top = `${y}px`;
+  }
+
+  private positionSubmenu(
+    submenuEl: HTMLDivElement,
+    parentEl: HTMLDivElement,
+    itemIndex: number,
+  ): void {
+    const containerRect = this.container.getBoundingClientRect();
+    const parentRect = parentEl.getBoundingClientRect();
+    const itemEl = parentEl.querySelector(`[data-index="${itemIndex}"]`) as HTMLElement | null;
+
+    const submenuRect = submenuEl.getBoundingClientRect();
+
+    // Default: right of parent, aligned with parent item top
+    let x = parentRect.right - containerRect.left;
+    let y = itemEl
+      ? itemEl.getBoundingClientRect().top - containerRect.top
+      : parentRect.top - containerRect.top;
+
+    // If not enough space on right, position to the left
+    if (x + submenuRect.width > containerRect.width) {
+      x = parentRect.left - containerRect.left - submenuRect.width;
+    }
+
+    if (y + submenuRect.height > containerRect.height) {
+      y = containerRect.height - submenuRect.height;
+    }
+    if (x < 0) x = 0;
+    if (y < 0) y = 0;
+
+    submenuEl.style.left = `${x}px`;
+    submenuEl.style.top = `${y}px`;
   }
 
-  private setFocused(index: number): void {
-    if (!this.menuElement) return;
+  private setFocused(depth: number, index: number): void {
+    const level = this.menuStack[depth];
+    if (!level) return;
 
-    // Remove old highlight
-    if (this.focusedIndex >= 0) {
-      const old = this.menuElement.querySelector(`[data-index="${this.focusedIndex}"]`) as HTMLElement | null;
+    if (level.focusedIndex >= 0) {
+      const old = level.element.querySelector(
+        `[data-index="${level.focusedIndex}"]`,
+      ) as HTMLElement | null;
       if (old) old.style.backgroundColor = '';
     }
 
-    this.focusedIndex = index;
+    level.focusedIndex = index;
 
-    // Apply highlight
-    const el = this.menuElement.querySelector(`[data-index="${index}"]`) as HTMLElement | null;
+    const el = level.element.querySelector(`[data-index="${index}"]`) as HTMLElement | null;
     if (el) {
       el.style.backgroundColor = this.theme.colors.hoverRowBackground;
     }
   }
 
-  private executeItem(index: number): void {
-    const item = this.visibleItems[index];
+  private executeItem(depth: number, index: number): void {
+    const level = this.menuStack[depth];
+    if (!level) return;
+
+    const item = level.items[index];
     if (!item || !this.currentContext) return;
     if (item.isDisabled && item.isDisabled(this.currentContext)) return;
 
+    if (item.submenu && item.submenu.length > 0) {
+      this.openSubmenu(depth, index);
+      return;
+    }
+
+    if (!item.action) return;
+
     const ctx = this.currentContext;
     this.close();
     item.action(ctx);
   }
 
+  private get activeDepth(): number {
+    return this.menuStack.length - 1;
+  }
+
   private handleKeyDown = (e: KeyboardEvent): void => {
+    const depth = this.activeDepth;
+    if (depth < 0) return;
+
     switch (e.key) {
       case 'Escape':
         e.preventDefault();
         e.stopPropagation();
-        this.close();
+        if (depth > 0) {
+          this.closeSubmenusFrom(depth);
+        } else {
+          this.close();
+        }
         break;
       case 'ArrowDown':
         e.preventDefault();
-        this.moveFocus(1);
+        this.moveFocus(depth, 1);
         break;
       case 'ArrowUp':
         e.preventDefault();
-        this.moveFocus(-1);
+        this.moveFocus(depth, -1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        this.handleArrowRight(depth);
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        this.handleArrowLeft(depth);
         break;
       case 'Enter':
         e.preventDefault();
-        if (this.focusedIndex >= 0) {
-          this.executeItem(this.focusedIndex);
+        if (this.menuStack[depth].focusedIndex >= 0) {
+          this.executeItem(depth, this.menuStack[depth].focusedIndex);
         }
         break;
     }
   };
 
-  private moveFocus(delta: number): void {
-    if (this.visibleItems.length === 0) return;
+  private handleArrowRight(depth: number): void {
+    const level = this.menuStack[depth];
+    if (!level || level.focusedIndex < 0) return;
+
+    const item = level.items[level.focusedIndex];
+    if (item?.submenu && item.submenu.length > 0) {
+      this.openSubmenu(depth, level.focusedIndex);
+      const newDepth = depth + 1;
+      if (this.menuStack[newDepth]) {
+        this.moveFocus(newDepth, 1);
+      }
+    }
+  }
+
+  private handleArrowLeft(depth: number): void {
+    if (depth > 0) {
+      this.closeSubmenusFrom(depth);
+    }
+  }
+
+  private moveFocus(depth: number, delta: number): void {
+    const level = this.menuStack[depth];
+    if (!level || level.items.length === 0) return;
 
-    let next = this.focusedIndex + delta;
-    if (next < 0) next = this.visibleItems.length - 1;
-    if (next >= this.visibleItems.length) next = 0;
+    let next = level.focusedIndex + delta;
+    if (next < 0) next = level.items.length - 1;
+    if (next >= level.items.length) next = 0;
 
-    // Skip disabled items
     const startIndex = next;
     while (true) {
-      const item = this.visibleItems[next];
+      const item = level.items[next];
       if (!item.isDisabled || !this.currentContext || !item.isDisabled(this.currentContext)) break;
       next += delta > 0 ? 1 : -1;
-      if (next < 0) next = this.visibleItems.length - 1;
-      if (next >= this.visibleItems.length) next = 0;
-      if (next === startIndex) break; // all disabled
+      if (next < 0) next = level.items.length - 1;
+      if (next >= level.items.length) next = 0;
+      if (next === startIndex) break;
     }
 
-    this.setFocused(next);
+    this.setFocused(depth, next);
   }
 
   private handleOutsideClick = (e: MouseEvent): void => {
-    if (this.menuElement && !this.menuElement.contains(e.target as Node)) {
-      this.close();
+    for (const level of this.menuStack) {
+      if (level.element.contains(e.target as Node)) return;
     }
+    this.close();
   };
 }
diff --git a/packages/core/src/context-menu/default-items.ts b/packages/core/src/context-menu/default-items.ts
index 5c3376e..edbd9f8 100644
--- a/packages/core/src/context-menu/default-items.ts
+++ b/packages/core/src/context-menu/default-items.ts
@@ -12,13 +12,15 @@ import { InsertRowCommand, DeleteRowCommand } from '../commands/row-commands';
 import { BatchCellEditCommand } from '../commands/batch-cell-edit-command';
 import type { CellEdit } from '../commands/batch-cell-edit-command';
 import { serializeToTSV } from '../clipboard/clipboard-serializer';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
-export function createDefaultMenuItems(): ContextMenuItem[] {
+export function createDefaultMenuItems(locale?: ResolvedLocale): ContextMenuItem[] {
+  const cm = locale?.contextMenu;
   return [
     // ─── Clipboard items (all contexts with selection) ───
     {
       id: 'cut',
-      label: 'Cut',
+      label: cm?.cut ?? 'Cut',
       icon: '✂',
       shortcut: 'Ctrl+X',
       contexts: ['cell', 'header', 'row-number'],
@@ -30,7 +32,9 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
         if (data.length === 0) return;
 
         const tsv = serializeToTSV(data);
-        navigator.clipboard.writeText(tsv).catch(() => {/* ignore */});
+        navigator.clipboard.writeText(tsv).catch(() => {
+          /* ignore */
+        });
 
         // Clear source cells
         const sel = engine.getSelectionManager().getSelection();
@@ -60,7 +64,7 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
     },
     {
       id: 'copy',
-      label: 'Copy',
+      label: cm?.copy ?? 'Copy',
       icon: '📋',
       shortcut: 'Ctrl+C',
       separator: true,
@@ -73,52 +77,59 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
         if (data.length === 0) return;
 
         const tsv = serializeToTSV(data);
-        navigator.clipboard.writeText(tsv).catch(() => {/* ignore */});
+        navigator.clipboard.writeText(tsv).catch(() => {
+          /* ignore */
+        });
       },
     },
     {
       id: 'paste',
-      label: 'Paste',
+      label: cm?.paste ?? 'Paste',
       icon: '📥',
       shortcut: 'Ctrl+V',
       separator: true,
       contexts: ['cell'],
       action: (ctx) => {
         const engine = ctx.engine;
-        navigator.clipboard.readText().then((text) => {
-          if (!text) return;
-          const rows = text.split('\n').map((line) => line.split('\t'));
-          const sel = engine.getSelectionManager().getSelection();
-          const startRow = sel.activeCell.row;
-          const startCol = sel.activeCell.col;
-          const dataView = engine.getDataView();
-          const cellStore = engine.getCellStore();
-          const cmdMgr = engine.getCommandManager();
-          const maxRow = engine.getSelectionManager().rowCount - 1;
-          const maxCol = engine.getSelectionManager().colCount - 1;
+        navigator.clipboard
+          .readText()
+          .then((text) => {
+            if (!text) return;
+            const rows = text.split('\n').map((line) => line.split('\t'));
+            const sel = engine.getSelectionManager().getSelection();
+            const startRow = sel.activeCell.row;
+            const startCol = sel.activeCell.col;
+            const dataView = engine.getDataView();
+            const cellStore = engine.getCellStore();
+            const cmdMgr = engine.getCommandManager();
+            const maxRow = engine.getSelectionManager().rowCount - 1;
+            const maxCol = engine.getSelectionManager().colCount - 1;
 
-          const edits: CellEdit[] = [];
-          for (let r = 0; r < rows.length; r++) {
-            const targetRow = startRow + r;
-            if (targetRow > maxRow) break;
-            const physRow = dataView.getPhysicalRow(targetRow);
-            if (physRow < 0) continue;
-            for (let c = 0; c < rows[r].length; c++) {
-              const targetCol = startCol + c;
-              if (targetCol > maxCol) break;
-              const oldCell = cellStore.get(physRow, targetCol);
-              const oldValue = oldCell?.value ?? null;
-              const raw = rows[r][c];
-              const newValue = raw === '' ? null : (isNaN(Number(raw)) ? raw : Number(raw));
-              edits.push({ row: physRow, col: targetCol, oldValue, newValue });
+            const edits: CellEdit[] = [];
+            for (let r = 0; r < rows.length; r++) {
+              const targetRow = startRow + r;
+              if (targetRow > maxRow) break;
+              const physRow = dataView.getPhysicalRow(targetRow);
+              if (physRow < 0) continue;
+              for (let c = 0; c < rows[r].length; c++) {
+                const targetCol = startCol + c;
+                if (targetCol > maxCol) break;
+                const oldCell = cellStore.get(physRow, targetCol);
+                const oldValue = oldCell?.value ?? null;
+                const raw = rows[r][c];
+                const newValue = raw === '' ? null : isNaN(Number(raw)) ? raw : Number(raw);
+                edits.push({ row: physRow, col: targetCol, oldValue, newValue });
+              }
             }
-          }
-          if (edits.length > 0) {
-            const cmd = new BatchCellEditCommand(cellStore, edits);
-            cmdMgr.execute(cmd);
-            engine.render();
-          }
-        }).catch(() => {/* clipboard not available */});
+            if (edits.length > 0) {
+              const cmd = new BatchCellEditCommand(cellStore, edits);
+              cmdMgr.execute(cmd);
+              engine.render();
+            }
+          })
+          .catch(() => {
+            /* clipboard not available */
+          });
       },
       isDisabled: () => {
         return !navigator.clipboard?.readText;
@@ -128,7 +139,7 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
     // ─── Sort items (header context) ───
     {
       id: 'sort-asc',
-      label: 'Sort Ascending',
+      label: cm?.sortAscending ?? 'Sort Ascending',
       icon: '↑',
       contexts: ['header'],
       action: (ctx) => {
@@ -137,7 +148,7 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
     },
     {
       id: 'sort-desc',
-      label: 'Sort Descending',
+      label: cm?.sortDescending ?? 'Sort Descending',
       icon: '↓',
       separator: true,
       contexts: ['header'],
@@ -149,7 +160,7 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
     // ─── Row operations (row-number context) ───
     {
       id: 'insert-row-above',
-      label: 'Insert Row Above',
+      label: cm?.insertRowAbove ?? 'Insert Row Above',
       icon: '⬆',
       contexts: ['row-number'],
       action: (ctx) => {
@@ -168,7 +179,7 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
     },
     {
       id: 'insert-row-below',
-      label: 'Insert Row Below',
+      label: cm?.insertRowBelow ?? 'Insert Row Below',
       icon: '⬇',
       contexts: ['row-number'],
       action: (ctx) => {
@@ -187,7 +198,7 @@ export function createDefaultMenuItems(): ContextMenuItem[] {
     },
     {
       id: 'delete-row',
-      label: 'Delete Row',
+      label: cm?.deleteRow ?? 'Delete Row',
       icon: '🗑',
       contexts: ['row-number'],
       action: (ctx) => {
diff --git a/packages/core/src/editing/cell-editor-registry.ts b/packages/core/src/editing/cell-editor-registry.ts
new file mode 100644
index 0000000..7c51571
--- /dev/null
+++ b/packages/core/src/editing/cell-editor-registry.ts
@@ -0,0 +1,91 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * CellEditorRegistry — maps column types / predicates to CellEditor instances.
+ *
+ * The engine queries the registry via `resolve(column, value)` to find the
+ * best-matching editor for a cell. Multiple editors may be registered;
+ * the one with the highest priority whose matcher returns true wins.
+ *
+ * InlineEditor (textarea) is NOT managed by the registry — it serves as the
+ * engine's built-in fallback when no registered editor matches.
+ */
+
+import type { CellValue, ColumnDef } from '../types/interfaces';
+import type { SpreadsheetTheme } from '../themes/theme-types';
+import type { ResolvedLocale } from '../locale/resolve-locale';
+import type { CellEditor, CellEditorMatcher, CellEditorRegistration } from './cell-editor';
+
+export class CellEditorRegistry {
+  private entries: CellEditorRegistration[] = [];
+
+  /**
+   * Register an editor with a matcher predicate.
+   * @param editor The CellEditor instance
+   * @param matcher Predicate: (column, value) => boolean
+   * @param priority Higher wins when multiple match (default: 0)
+   */
+  register(editor: CellEditor, matcher: CellEditorMatcher, priority = 0): void {
+    this.entries.push({ editor, matcher, priority });
+    // Keep sorted by priority descending for fast resolve
+    this.entries.sort((a, b) => b.priority - a.priority);
+  }
+
+  /**
+   * Convenience: register an editor for a specific column `type` string.
+   * Equivalent to register(editor, (col) => col.type === type, priority).
+   */
+  registerForType(editor: CellEditor, type: string, priority = 0): void {
+    this.register(editor, (column: ColumnDef) => column.type === type, priority);
+  }
+
+  /**
+   * Find the best editor for a cell.
+   * @returns The matching CellEditor, or null if none match (engine uses InlineEditor).
+   */
+  resolve(column: ColumnDef, value: CellValue): CellEditor | null {
+    for (const entry of this.entries) {
+      if (entry.matcher(column, value)) {
+        return entry.editor;
+      }
+    }
+    return null;
+  }
+
+  /** Get all registered editors (for theme/locale propagation). */
+  getAll(): CellEditor[] {
+    // Deduplicate — same editor may be registered for multiple matchers
+    const seen = new Set<CellEditor>();
+    const result: CellEditor[] = [];
+    for (const entry of this.entries) {
+      if (!seen.has(entry.editor)) {
+        seen.add(entry.editor);
+        result.push(entry.editor);
+      }
+    }
+    return result;
+  }
+
+  /** Propagate theme to all registered editors. */
+  setTheme(theme: SpreadsheetTheme): void {
+    for (const editor of this.getAll()) {
+      editor.setTheme(theme);
+    }
+  }
+
+  /** Propagate locale to all registered editors. */
+  setLocale(locale: ResolvedLocale): void {
+    for (const editor of this.getAll()) {
+      editor.setLocale(locale);
+    }
+  }
+
+  /** Destroy all registered editors and clear the registry. */
+  destroy(): void {
+    for (const editor of this.getAll()) {
+      editor.destroy();
+    }
+    this.entries = [];
+  }
+}
diff --git a/packages/core/src/editing/cell-editor.ts b/packages/core/src/editing/cell-editor.ts
new file mode 100644
index 0000000..05949bc
--- /dev/null
+++ b/packages/core/src/editing/cell-editor.ts
@@ -0,0 +1,119 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * CellEditor — generic interface for overlay cell editors.
+ *
+ * Implementations render a DOM overlay (calendar, dropdown, color picker, etc.)
+ * positioned above a cell. The engine delegates lifecycle management to the
+ * editor via this interface.
+ */
+
+import type { LayoutEngine } from '../renderer/layout-engine';
+import type { ScrollManager } from '../renderer/scroll-manager';
+import type { CellStore } from '../model/cell-store';
+import type { DataView } from '../dataview/data-view';
+import type { CellValue, ColumnDef } from '../types/interfaces';
+import type { SpreadsheetTheme } from '../themes/theme-types';
+import type { MergeManager } from '../merge/merge-manager';
+import type { ResolvedLocale } from '../locale/resolve-locale';
+import type { EditorCloseReason } from './inline-editor';
+
+/** Context passed to CellEditor.open() with everything needed to render. */
+export interface CellEditorContext {
+  /** Logical row index. */
+  row: number;
+  /** Logical column index. */
+  col: number;
+  /** Current cell value. */
+  value: CellValue;
+  /** Column definition for the cell being edited. */
+  column: ColumnDef;
+  /** DOM container to append the editor overlay into. */
+  container: HTMLElement;
+  /** Scroll container (for scroll-close behavior). */
+  scrollContainer: HTMLElement;
+  layoutEngine: LayoutEngine;
+  scrollManager: ScrollManager;
+  cellStore: CellStore;
+  dataView: DataView;
+  theme: SpreadsheetTheme;
+  locale: ResolvedLocale;
+  mergeManager: MergeManager | null;
+  frozenRows: number;
+  frozenColumns: number;
+}
+
+/** Callback to commit a value and close the editor. */
+export type CellEditorCommit = (
+  row: number,
+  col: number,
+  oldValue: CellValue,
+  newValue: CellValue,
+) => void;
+
+/** Callback when the editor closes. */
+export type CellEditorClose = (reason: EditorCloseReason) => void;
+
+/**
+ * CellEditor interface — lifecycle contract for custom overlay editors.
+ *
+ * Implementations must:
+ * - Render DOM into context.container on open()
+ * - Remove DOM on close()
+ * - Call commitFn to persist changes
+ * - Call closeFn to signal the engine
+ * - Clean up all resources on destroy()
+ */
+export interface CellEditor {
+  /** Unique identifier for this editor type. */
+  readonly id: string;
+
+  /** Whether the editor is currently open. */
+  readonly isOpen: boolean;
+
+  /** Row being edited (valid when isOpen). */
+  readonly editingRow: number;
+
+  /** Column being edited (valid when isOpen). */
+  readonly editingCol: number;
+
+  /**
+   * Open the editor for a cell.
+   * @param context Cell context with position, value, layout, theme, locale
+   * @param commitFn Call to persist a new value
+   * @param closeFn Call when the editor closes (for any reason)
+   */
+  open(context: CellEditorContext, commitFn: CellEditorCommit, closeFn: CellEditorClose): void;
+
+  /**
+   * Close the editor.
+   * @param reason Why the editor is closing
+   */
+  close(reason: EditorCloseReason): void;
+
+  /** Update theme at runtime (editor may be open or closed). */
+  setTheme(theme: SpreadsheetTheme): void;
+
+  /** Update locale at runtime (editor may be open or closed). */
+  setLocale(locale: ResolvedLocale): void;
+
+  /** Clean up all resources (DOM, listeners). Called when engine is destroyed. */
+  destroy(): void;
+}
+
+/**
+ * Predicate to determine if an editor handles a given column.
+ * Return true if this editor should be used for the column.
+ */
+export type CellEditorMatcher = (column: ColumnDef, value: CellValue) => boolean;
+
+/** Registration entry in the CellEditorRegistry. */
+export interface CellEditorRegistration {
+  /** The editor instance. */
+  editor: CellEditor;
+  /** Predicate to match columns/values this editor handles. */
+  matcher: CellEditorMatcher;
+  /** Higher priority wins when multiple editors match (default: 0). */
+  priority: number;
+}
diff --git a/packages/core/src/editing/date-picker-editor.ts b/packages/core/src/editing/date-picker-editor.ts
new file mode 100644
index 0000000..0086168
--- /dev/null
+++ b/packages/core/src/editing/date-picker-editor.ts
@@ -0,0 +1,93 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * DatePickerEditor — CellEditor adapter wrapping DatePickerOverlay.
+ *
+ * Registered in CellEditorRegistry for columns with `type: 'date'`.
+ * Delegates rendering to DatePickerOverlay with the new CellEditor lifecycle.
+ */
+
+import type { SpreadsheetTheme } from '../themes/theme-types';
+import type { ResolvedLocale } from '../locale/resolve-locale';
+import type { EditorCloseReason } from './inline-editor';
+import type { CellEditor, CellEditorContext, CellEditorCommit, CellEditorClose } from './cell-editor';
+import { DatePickerOverlay } from './date-picker-overlay';
+
+export class DatePickerEditor implements CellEditor {
+  readonly id = 'date-picker';
+
+  private overlay: DatePickerOverlay | null = null;
+  private _isOpen = false;
+  private _editingRow = -1;
+  private _editingCol = -1;
+  private closeFn: CellEditorClose | null = null;
+
+  get isOpen(): boolean {
+    return this._isOpen;
+  }
+
+  get editingRow(): number {
+    return this._editingRow;
+  }
+
+  get editingCol(): number {
+    return this._editingCol;
+  }
+
+  open(context: CellEditorContext, commitFn: CellEditorCommit, closeFn: CellEditorClose): void {
+    if (this._isOpen) {
+      this.close('programmatic');
+    }
+
+    this.closeFn = closeFn;
+    this._editingRow = context.row;
+    this._editingCol = context.col;
+
+    // Create a fresh DatePickerOverlay for each open
+    this.overlay = new DatePickerOverlay({
+      container: context.container,
+      scrollContainer: context.scrollContainer,
+      layoutEngine: context.layoutEngine,
+      scrollManager: context.scrollManager,
+      theme: context.theme,
+      frozenRows: context.frozenRows,
+      frozenColumns: context.frozenColumns,
+      onCommit: commitFn,
+      onClose: (reason: EditorCloseReason) => {
+        this._isOpen = false;
+        this.overlay = null;
+        this.closeFn?.(reason);
+      },
+    });
+
+    if (context.locale) {
+      this.overlay.setLocale(context.locale);
+    }
+
+    this.overlay.open(context.row, context.col, context.value);
+    this._isOpen = true;
+  }
+
+  close(reason: EditorCloseReason): void {
+    if (!this._isOpen || !this.overlay) return;
+    this.overlay.close(reason);
+    // The onClose callback sets _isOpen = false and clears overlay
+  }
+
+  setTheme(theme: SpreadsheetTheme): void {
+    this.overlay?.setTheme(theme);
+  }
+
+  setLocale(locale: ResolvedLocale): void {
+    this.overlay?.setLocale(locale);
+  }
+
+  destroy(): void {
+    if (this._isOpen) {
+      this.close('programmatic');
+    }
+    this.overlay = null;
+    this.closeFn = null;
+  }
+}
diff --git a/packages/core/src/editing/date-picker-overlay.ts b/packages/core/src/editing/date-picker-overlay.ts
new file mode 100644
index 0000000..9423536
--- /dev/null
+++ b/packages/core/src/editing/date-picker-overlay.ts
@@ -0,0 +1,544 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * DatePickerOverlay — a pure-DOM calendar widget for date-type cells.
+ *
+ * Opens below the target cell, renders a month grid with navigation,
+ * and commits the selected date via the provided callback. Keyboard
+ * navigation (arrows, Enter, Escape) is supported. Grid scroll or
+ * outside click closes the picker.
+ */
+
+import type { LayoutEngine } from '../renderer/layout-engine';
+import type { ScrollManager } from '../renderer/scroll-manager';
+import type { SpreadsheetTheme } from '../themes/theme-types';
+import type { CellValue } from '../types/interfaces';
+import type { EditorCloseReason } from './inline-editor';
+import type { ResolvedLocale } from '../locale/resolve-locale';
+
+export interface DatePickerConfig {
+  container: HTMLElement;
+  scrollContainer: HTMLElement;
+  layoutEngine: LayoutEngine;
+  scrollManager: ScrollManager;
+  theme: SpreadsheetTheme;
+  onCommit: (row: number, col: number, oldValue: CellValue, newValue: CellValue) => void;
+  onClose: (reason: EditorCloseReason) => void;
+  frozenRows?: number;
+  frozenColumns?: number;
+}
+
+const DAYS_IN_WEEK = 7;
+const WEEK_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+/** Parse a cell value into a Date (local time) or null. */
+function parseDate(value: CellValue): Date | null {
+  if (value instanceof Date && !isNaN(value.getTime())) return value;
+  if (typeof value === 'string') {
+    // Parse YYYY-MM-DD as local date (avoid UTC interpretation)
+    const isoMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (isoMatch) {
+      return new Date(Number(isoMatch[1]), Number(isoMatch[2]) - 1, Number(isoMatch[3]));
+    }
+    const d = new Date(value);
+    if (!isNaN(d.getTime())) return d;
+  }
+  if (typeof value === 'number') {
+    const d = new Date(value);
+    if (!isNaN(d.getTime())) return d;
+  }
+  return null;
+}
+
+/** Get the number of days in a month (0-indexed month). */
+function daysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+/** Get day of week (0=Sun) for the first day of a month. */
+function firstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+/** Compare two dates ignoring time. */
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export class DatePickerOverlay {
+  private config: DatePickerConfig;
+  private overlay: HTMLDivElement | null = null;
+  private currentRow = -1;
+  private currentCol = -1;
+  private originalValue: CellValue = null;
+  private _isOpen = false;
+
+  // Calendar state
+  private viewYear = 0;
+  private viewMonth = 0; // 0-based
+  private selectedDate: Date | null = null;
+  private focusedDay = 1;
+
+  // Event handler refs for cleanup
+  private scrollHandler: (() => void) | null = null;
+  private outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+  private locale: ResolvedLocale | null = null;
+
+  constructor(config: DatePickerConfig) {
+    this.config = config;
+  }
+
+  get isOpen(): boolean {
+    return this._isOpen;
+  }
+
+  get editingRow(): number {
+    return this.currentRow;
+  }
+
+  get editingCol(): number {
+    return this.currentCol;
+  }
+
+  /** Update theme for runtime theme switching. */
+  setTheme(theme: SpreadsheetTheme): void {
+    this.config = { ...this.config, theme };
+  }
+
+  /** Update locale for runtime locale switching. */
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
+  /**
+   * Open the date picker for a cell. If already open, closes first.
+   * @param row Logical row index
+   * @param col Logical column index
+   * @param currentValue Current cell value (Date, string, or null)
+   */
+  open(row: number, col: number, currentValue: CellValue): void {
+    if (this._isOpen) {
+      this.close('programmatic');
+    }
+
+    this.currentRow = row;
+    this.currentCol = col;
+    this.originalValue = currentValue;
+
+    const parsed = parseDate(currentValue);
+    const today = new Date();
+    this.selectedDate = parsed;
+    this.viewYear = parsed ? parsed.getFullYear() : today.getFullYear();
+    this.viewMonth = parsed ? parsed.getMonth() : today.getMonth();
+    this.focusedDay = parsed ? parsed.getDate() : today.getDate();
+
+    this.overlay = document.createElement('div');
+    this.overlay.setAttribute('role', 'dialog');
+    this.overlay.setAttribute('aria-label', this.locale?.datePicker?.ariaLabel ?? 'Date picker');
+    this.renderOverlay();
+    this.positionOverlay();
+
+    this.config.container.appendChild(this.overlay);
+    this._isOpen = true;
+
+    // Focus the grid for keyboard handling
+    this.overlay.focus();
+
+    // Scroll closes the picker
+    this.scrollHandler = () => {
+      if (this._isOpen) {
+        const frozenRows = this.config.frozenRows ?? 0;
+        const frozenCols = this.config.frozenColumns ?? 0;
+        if (this.currentRow < frozenRows && this.currentCol < frozenCols) return;
+        this.close('scroll');
+      }
+    };
+    this.config.scrollContainer.addEventListener('scroll', this.scrollHandler, { passive: true });
+
+    // Outside click closes
+    this.outsideClickHandler = (e: MouseEvent) => {
+      if (this.overlay && !this.overlay.contains(e.target as Node)) {
+        this.close('blur');
+      }
+    };
+    // Delay to avoid immediate close from the triggering click
+    setTimeout(() => {
+      if (this._isOpen) {
+        document.addEventListener('mousedown', this.outsideClickHandler!);
+      }
+    }, 0);
+  }
+
+  /** Close the picker and report reason. */
+  close(reason: EditorCloseReason): void {
+    if (!this._isOpen) return;
+    this._isOpen = false;
+
+    if (this.overlay) {
+      this.overlay.removeEventListener('keydown', this.handleKeyDown);
+      if (this.overlay.parentNode) {
+        this.overlay.parentNode.removeChild(this.overlay);
+      }
+      this.overlay = null;
+    }
+
+    if (this.scrollHandler) {
+      this.config.scrollContainer.removeEventListener('scroll', this.scrollHandler);
+      this.scrollHandler = null;
+    }
+
+    if (this.outsideClickHandler) {
+      document.removeEventListener('mousedown', this.outsideClickHandler);
+      this.outsideClickHandler = null;
+    }
+
+    this.config.onClose(reason);
+  }
+
+  /** Select a date, commit value, and close. */
+  private selectDate(day: number): void {
+    // Format as YYYY-MM-DD using local date components (avoid UTC timezone shift)
+    const mm = String(this.viewMonth + 1).padStart(2, '0');
+    const dd = String(day).padStart(2, '0');
+    const isoStr = `${this.viewYear}-${mm}-${dd}`;
+    this.config.onCommit(this.currentRow, this.currentCol, this.originalValue, isoStr);
+    this.close('enter');
+  }
+
+  /** Clean up on engine destroy. */
+  destroy(): void {
+    if (this._isOpen) {
+      this.close('programmatic');
+    }
+  }
+
+  // ─── Positioning ──────────────────────────────────────
+
+  private positionOverlay(): void {
+    if (!this.overlay) return;
+
+    const le = this.config.layoutEngine;
+    const sm = this.config.scrollManager;
+    const frozenRows = this.config.frozenRows ?? 0;
+    const frozenCols = this.config.frozenColumns ?? 0;
+
+    const cellRect = le.getCellRect(this.currentRow, this.currentCol);
+    const scrollXOffset = this.currentCol < frozenCols ? 0 : sm.scrollX;
+    const scrollYOffset = this.currentRow < frozenRows ? 0 : sm.scrollY;
+
+    const x = cellRect.x - scrollXOffset;
+    const y = cellRect.y - scrollYOffset + cellRect.height; // Below cell
+
+    const containerRect = this.config.container.getBoundingClientRect();
+    const overlayWidth = 224; // Fixed width
+    const overlayHeight = 260; // Approximate height
+
+    // Clamp to container bounds
+    let left = x;
+    let top = y;
+
+    if (left + overlayWidth > containerRect.width) {
+      left = containerRect.width - overlayWidth;
+    }
+    if (left < 0) left = 0;
+
+    // If no room below, position above the cell
+    if (top + overlayHeight > containerRect.height) {
+      top = cellRect.y - scrollYOffset - overlayHeight;
+    }
+    if (top < 0) top = 0;
+
+    const s = this.overlay.style;
+    s.position = 'absolute';
+    s.left = `${left}px`;
+    s.top = `${top}px`;
+    s.zIndex = '50'; // Above editor (20) but below context menu (100)
+  }
+
+  // ─── Rendering ──────────────────────────────────────
+
+  private renderOverlay(): void {
+    if (!this.overlay) return;
+
+    const theme = this.config.theme;
+    const o = this.overlay;
+
+    // Base styles
+    o.style.width = '224px';
+    o.style.backgroundColor = theme.colors.cellEditBackground;
+    o.style.border = `1px solid ${theme.colors.gridLine}`;
+    o.style.borderRadius = '4px';
+    o.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
+    o.style.fontFamily = theme.fonts.cell;
+    o.style.fontSize = `${theme.fonts.cellSize}px`;
+    o.style.color = theme.colors.cellText;
+    o.style.userSelect = 'none';
+    o.style.outline = 'none';
+    o.tabIndex = 0;
+
+    this.rebuildCalendar();
+
+    // Keyboard handler
+    o.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  private rebuildCalendar(): void {
+    if (!this.overlay) return;
+    this.overlay.innerHTML = '';
+
+    const theme = this.config.theme;
+
+    // ── Header: < Month Year >
+    const header = document.createElement('div');
+    header.style.display = 'flex';
+    header.style.alignItems = 'center';
+    header.style.justifyContent = 'space-between';
+    header.style.padding = '8px';
+    header.style.borderBottom = `1px solid ${theme.colors.gridLine}`;
+
+    const prevBtn = this.createNavButton('◀', () => this.navigateMonth(-1));
+    const nextBtn = this.createNavButton('▶', () => this.navigateMonth(1));
+
+    const title = document.createElement('span');
+    title.style.fontWeight = 'bold';
+    const monthNames = this.locale?.datePicker?.monthNames ?? MONTH_NAMES;
+    title.textContent = `${monthNames[this.viewMonth]} ${this.viewYear}`;
+
+    header.appendChild(prevBtn);
+    header.appendChild(title);
+    header.appendChild(nextBtn);
+    this.overlay.appendChild(header);
+
+    // ── Day-of-week labels
+    const weekRow = document.createElement('div');
+    weekRow.style.display = 'grid';
+    weekRow.style.gridTemplateColumns = `repeat(${DAYS_IN_WEEK}, 1fr)`;
+    weekRow.style.padding = '4px 4px 0';
+
+    const weekLabels = this.locale?.datePicker?.weekLabels ?? WEEK_LABELS;
+    for (const label of weekLabels) {
+      const cell = document.createElement('div');
+      cell.style.textAlign = 'center';
+      cell.style.fontSize = '10px';
+      cell.style.color = theme.colors.headerText ?? theme.colors.cellText;
+      cell.style.padding = '2px 0';
+      cell.textContent = label;
+      weekRow.appendChild(cell);
+    }
+    this.overlay.appendChild(weekRow);
+
+    // ── Day grid
+    const daysGrid = document.createElement('div');
+    daysGrid.style.display = 'grid';
+    daysGrid.style.gridTemplateColumns = `repeat(${DAYS_IN_WEEK}, 1fr)`;
+    daysGrid.style.padding = '4px';
+    daysGrid.style.gap = '2px';
+
+    const firstDay = firstDayOfMonth(this.viewYear, this.viewMonth);
+    const totalDays = daysInMonth(this.viewYear, this.viewMonth);
+    const today = new Date();
+
+    // Empty cells before first day
+    for (let i = 0; i < firstDay; i++) {
+      const empty = document.createElement('div');
+      daysGrid.appendChild(empty);
+    }
+
+    // Day cells
+    for (let day = 1; day <= totalDays; day++) {
+      const cell = document.createElement('div');
+      cell.textContent = String(day);
+      cell.style.textAlign = 'center';
+      cell.style.padding = '4px 0';
+      cell.style.borderRadius = '3px';
+      cell.style.cursor = 'pointer';
+      cell.dataset.day = String(day);
+
+      const cellDate = new Date(this.viewYear, this.viewMonth, day);
+
+      // Highlight today
+      if (isSameDay(cellDate, today)) {
+        cell.style.border = `1px solid ${theme.colors.activeCellBorder}`;
+      }
+
+      // Highlight selected date
+      if (this.selectedDate && isSameDay(cellDate, this.selectedDate)) {
+        cell.style.backgroundColor = theme.colors.activeCellBorder;
+        cell.style.color = '#fff';
+      }
+
+      // Highlight focused day
+      if (day === this.focusedDay) {
+        if (!(this.selectedDate && isSameDay(cellDate, this.selectedDate))) {
+          cell.style.backgroundColor = theme.colors.selectionFill;
+        }
+      }
+
+      // Hover effect
+      cell.addEventListener('mouseenter', () => {
+        if (!(this.selectedDate && isSameDay(cellDate, this.selectedDate))) {
+          cell.style.backgroundColor = theme.colors.selectionFill;
+        }
+      });
+      cell.addEventListener('mouseleave', () => {
+        if (this.selectedDate && isSameDay(cellDate, this.selectedDate)) {
+          cell.style.backgroundColor = theme.colors.activeCellBorder;
+        } else if (day === this.focusedDay) {
+          cell.style.backgroundColor = theme.colors.selectionFill;
+        } else {
+          cell.style.backgroundColor = '';
+        }
+      });
+
+      cell.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.selectDate(day);
+      });
+
+      daysGrid.appendChild(cell);
+    }
+
+    this.overlay.appendChild(daysGrid);
+
+    // ── Today button
+    const footer = document.createElement('div');
+    footer.style.padding = '4px 8px 8px';
+    footer.style.borderTop = `1px solid ${theme.colors.gridLine}`;
+    footer.style.textAlign = 'center';
+
+    const todayBtn = document.createElement('button');
+    todayBtn.textContent = this.locale?.datePicker?.today ?? 'Today';
+    todayBtn.style.background = 'none';
+    todayBtn.style.border = `1px solid ${theme.colors.gridLine}`;
+    todayBtn.style.borderRadius = '3px';
+    todayBtn.style.padding = '2px 12px';
+    todayBtn.style.cursor = 'pointer';
+    todayBtn.style.fontSize = `${theme.fonts.cellSize}px`;
+    todayBtn.style.fontFamily = theme.fonts.cell;
+    todayBtn.style.color = theme.colors.cellText;
+    todayBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const t = new Date();
+      this.viewYear = t.getFullYear();
+      this.viewMonth = t.getMonth();
+      this.selectDate(t.getDate());
+    });
+    footer.appendChild(todayBtn);
+    this.overlay.appendChild(footer);
+  }
+
+  private createNavButton(text: string, onClick: () => void): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.textContent = text;
+    btn.style.background = 'none';
+    btn.style.border = 'none';
+    btn.style.cursor = 'pointer';
+    btn.style.fontSize = '12px';
+    btn.style.padding = '4px 8px';
+    btn.style.color = this.config.theme.colors.cellText;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return btn;
+  }
+
+  private navigateMonth(delta: number): void {
+    this.viewMonth += delta;
+    if (this.viewMonth < 0) {
+      this.viewMonth = 11;
+      this.viewYear--;
+    } else if (this.viewMonth > 11) {
+      this.viewMonth = 0;
+      this.viewYear++;
+    }
+    const maxDays = daysInMonth(this.viewYear, this.viewMonth);
+    if (this.focusedDay > maxDays) this.focusedDay = maxDays;
+    this.rebuildCalendar();
+    this.overlay?.focus();
+  }
+
+  // ─── Keyboard ──────────────────────────────────────
+
+  private handleKeyDown = (e: KeyboardEvent): void => {
+    e.stopPropagation();
+
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        this.close('escape');
+        break;
+      case 'Enter':
+        e.preventDefault();
+        this.selectDate(this.focusedDay);
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        this.moveFocus(1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        this.moveFocus(-7);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        this.moveFocus(7);
+        break;
+      case 'Tab':
+        e.preventDefault();
+        this.selectDate(this.focusedDay);
+        break;
+    }
+  };
+
+  private moveFocus(delta: number): void {
+    const newDay = this.focusedDay + delta;
+    const maxDays = daysInMonth(this.viewYear, this.viewMonth);
+
+    if (newDay < 1) {
+      // Move to previous month
+      this.navigateMonth(-1);
+      const prevMaxDays = daysInMonth(this.viewYear, this.viewMonth);
+      this.focusedDay = prevMaxDays + newDay; // newDay is negative
+      this.rebuildCalendar();
+      this.overlay?.focus();
+      return;
+    }
+    if (newDay > maxDays) {
+      // Move to next month
+      const overflow = newDay - maxDays;
+      this.navigateMonth(1);
+      this.focusedDay = overflow;
+      this.rebuildCalendar();
+      this.overlay?.focus();
+      return;
+    }
+
+    this.focusedDay = newDay;
+    this.rebuildCalendar();
+    this.overlay?.focus();
+  }
+}
diff --git a/packages/core/src/editing/date-time-editor.ts b/packages/core/src/editing/date-time-editor.ts
new file mode 100644
index 0000000..da94e4c
--- /dev/null
+++ b/packages/core/src/editing/date-time-editor.ts
@@ -0,0 +1,797 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * DateTimeEditor — CellEditor for 'datetime' columns.
+ *
+ * Renders a combined date+time picker: calendar grid on top, hour/minute
+ * spin controls below. Commits an ISO datetime string (YYYY-MM-DDTHH:mm).
+ */
+
+import type { LayoutEngine } from '../renderer/layout-engine';
+import type { ScrollManager } from '../renderer/scroll-manager';
+import type { SpreadsheetTheme } from '../themes/theme-types';
+import type { CellValue } from '../types/interfaces';
+import type { EditorCloseReason } from './inline-editor';
+import type { CellEditor, CellEditorContext, CellEditorCommit, CellEditorClose } from './cell-editor';
+import type { ResolvedLocale } from '../locale/resolve-locale';
+
+const DAYS_IN_WEEK = 7;
+const WEEK_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+/** Parse a cell value into a Date (local time) or null. */
+function parseDateTime(value: CellValue): Date | null {
+  if (value instanceof Date && !isNaN(value.getTime())) return value;
+  if (typeof value === 'string') {
+    // ISO datetime: YYYY-MM-DDTHH:mm or YYYY-MM-DDTHH:mm:ss
+    const isoMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/);
+    if (isoMatch) {
+      return new Date(
+        Number(isoMatch[1]),
+        Number(isoMatch[2]) - 1,
+        Number(isoMatch[3]),
+        Number(isoMatch[4]),
+        Number(isoMatch[5]),
+        isoMatch[6] ? Number(isoMatch[6]) : 0,
+      );
+    }
+    // Date-only: YYYY-MM-DD (default time to 00:00)
+    const dateMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (dateMatch) {
+      return new Date(Number(dateMatch[1]), Number(dateMatch[2]) - 1, Number(dateMatch[3]));
+    }
+    const d = new Date(value);
+    if (!isNaN(d.getTime())) return d;
+  }
+  if (typeof value === 'number') {
+    const d = new Date(value);
+    if (!isNaN(d.getTime())) return d;
+  }
+  return null;
+}
+
+function daysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function firstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function pad2(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+/** Clamp value between min and max. */
+function clamp(val: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, val));
+}
+
+/**
+ * Focus section identifier for keyboard Tab cycling.
+ * calendar → hour → minute → calendar → ...
+ */
+type FocusSection = 'calendar' | 'hour' | 'minute';
+
+export class DateTimeEditor implements CellEditor {
+  readonly id = 'date-time-picker';
+
+  private overlay: HTMLDivElement | null = null;
+  private _isOpen = false;
+  private _editingRow = -1;
+  private _editingCol = -1;
+  private closeFn: CellEditorClose | null = null;
+  private commitFn: CellEditorCommit | null = null;
+  private originalValue: CellValue = null;
+
+  // Calendar state
+  private viewYear = 0;
+  private viewMonth = 0;
+  private selectedDate: Date | null = null;
+  private focusedDay = 1;
+
+  // Time state
+  private hour = 0;
+  private minute = 0;
+
+  // Focus tracking
+  private focusSection: FocusSection = 'calendar';
+  private hourInput: HTMLInputElement | null = null;
+  private minuteInput: HTMLInputElement | null = null;
+
+  // Event handler refs
+  private scrollHandler: (() => void) | null = null;
+  private outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+  private scrollContainer: HTMLElement | null = null;
+
+  // Layout refs (for positioning)
+  private layoutEngine: LayoutEngine | null = null;
+  private scrollManager: ScrollManager | null = null;
+  private container: HTMLElement | null = null;
+  private frozenRows = 0;
+  private frozenColumns = 0;
+
+  private theme: SpreadsheetTheme | null = null;
+  private locale: ResolvedLocale | null = null;
+
+  get isOpen(): boolean {
+    return this._isOpen;
+  }
+
+  get editingRow(): number {
+    return this._editingRow;
+  }
+
+  get editingCol(): number {
+    return this._editingCol;
+  }
+
+  open(context: CellEditorContext, commitFn: CellEditorCommit, closeFn: CellEditorClose): void {
+    if (this._isOpen) {
+      this.close('programmatic');
+    }
+
+    this.closeFn = closeFn;
+    this.commitFn = commitFn;
+    this._editingRow = context.row;
+    this._editingCol = context.col;
+    this.originalValue = context.value;
+    this.theme = context.theme;
+    this.locale = context.locale;
+    this.layoutEngine = context.layoutEngine;
+    this.scrollManager = context.scrollManager;
+    this.container = context.container;
+    this.frozenRows = context.frozenRows;
+    this.frozenColumns = context.frozenColumns;
+
+    const parsed = parseDateTime(context.value);
+    const now = new Date();
+    this.selectedDate = parsed;
+    this.viewYear = parsed ? parsed.getFullYear() : now.getFullYear();
+    this.viewMonth = parsed ? parsed.getMonth() : now.getMonth();
+    this.focusedDay = parsed ? parsed.getDate() : now.getDate();
+    this.hour = parsed ? parsed.getHours() : now.getHours();
+    this.minute = parsed ? parsed.getMinutes() : now.getMinutes();
+    this.focusSection = 'calendar';
+
+    this.overlay = document.createElement('div');
+    this.overlay.setAttribute('role', 'dialog');
+    this.overlay.setAttribute(
+      'aria-label',
+      this.locale?.dateTimePicker?.ariaLabel ?? 'Date and time picker',
+    );
+    this.renderOverlay();
+    this.positionOverlay();
+
+    context.container.appendChild(this.overlay);
+    this._isOpen = true;
+
+    this.overlay.focus();
+
+    // Scroll closes the picker (unless frozen cell)
+    this.scrollHandler = () => {
+      if (this._isOpen) {
+        if (this._editingRow < this.frozenRows && this._editingCol < this.frozenColumns) return;
+        this.close('scroll');
+      }
+    };
+    this.scrollContainer = context.scrollContainer;
+    this.scrollContainer.addEventListener('scroll', this.scrollHandler, { passive: true });
+
+    this.outsideClickHandler = (e: MouseEvent) => {
+      if (this.overlay && !this.overlay.contains(e.target as Node)) {
+        this.close('blur');
+      }
+    };
+    setTimeout(() => {
+      if (this._isOpen) {
+        document.addEventListener('mousedown', this.outsideClickHandler!);
+      }
+    }, 0);
+  }
+
+  close(reason: EditorCloseReason): void {
+    if (!this._isOpen) return;
+    this._isOpen = false;
+
+    if (this.overlay) {
+      this.overlay.removeEventListener('keydown', this.handleKeyDown);
+      if (this.overlay.parentNode) {
+        this.overlay.parentNode.removeChild(this.overlay);
+      }
+      this.overlay = null;
+    }
+
+    this.hourInput = null;
+    this.minuteInput = null;
+
+    if (this.scrollHandler && this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
+      this.scrollHandler = null;
+      this.scrollContainer = null;
+    }
+
+    if (this.outsideClickHandler) {
+      document.removeEventListener('mousedown', this.outsideClickHandler);
+      this.outsideClickHandler = null;
+    }
+
+    this.closeFn?.(reason);
+  }
+
+  setTheme(theme: SpreadsheetTheme): void {
+    this.theme = theme;
+  }
+
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
+  destroy(): void {
+    if (this._isOpen) {
+      this.close('programmatic');
+    }
+    this.overlay = null;
+    this.closeFn = null;
+    this.commitFn = null;
+  }
+
+  // ─── Commit ──────────────────────────────────────
+
+  private commitValue(): void {
+    const mm = pad2(this.viewMonth + 1);
+    const dd = pad2(this.focusedDay);
+    const hh = pad2(this.hour);
+    const mi = pad2(this.minute);
+    const isoStr = `${this.viewYear}-${mm}-${dd}T${hh}:${mi}`;
+    this.commitFn?.(this._editingRow, this._editingCol, this.originalValue, isoStr);
+    this.close('enter');
+  }
+
+  // ─── Positioning ──────────────────────────────────────
+
+  private positionOverlay(): void {
+    if (!this.overlay || !this.layoutEngine || !this.scrollManager) return;
+
+    const le = this.layoutEngine;
+    const sm = this.scrollManager;
+
+    const cellRect = le.getCellRect(this._editingRow, this._editingCol);
+    const scrollXOffset = this._editingCol < this.frozenColumns ? 0 : sm.scrollX;
+    const scrollYOffset = this._editingRow < this.frozenRows ? 0 : sm.scrollY;
+
+    const x = cellRect.x - scrollXOffset;
+    const y = cellRect.y - scrollYOffset + cellRect.height;
+
+    const containerEl = this.container;
+    if (!containerEl) return;
+    const containerRect = containerEl.getBoundingClientRect();
+    const overlayWidth = 240;
+    const overlayHeight = 320;
+
+    let left = x;
+    let top = y;
+
+    if (left + overlayWidth > containerRect.width) {
+      left = containerRect.width - overlayWidth;
+    }
+    if (left < 0) left = 0;
+
+    if (top + overlayHeight > containerRect.height) {
+      top = cellRect.y - scrollYOffset - overlayHeight;
+    }
+    if (top < 0) top = 0;
+
+    const s = this.overlay.style;
+    s.position = 'absolute';
+    s.left = `${left}px`;
+    s.top = `${top}px`;
+    s.zIndex = '50';
+  }
+
+  // ─── Rendering ──────────────────────────────────────
+
+  private renderOverlay(): void {
+    if (!this.overlay || !this.theme) return;
+
+    const o = this.overlay;
+    o.style.width = '240px';
+    o.style.backgroundColor = this.theme.colors.cellEditBackground;
+    o.style.border = `1px solid ${this.theme.colors.gridLine}`;
+    o.style.borderRadius = '4px';
+    o.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
+    o.style.fontFamily = this.theme.fonts.cell;
+    o.style.fontSize = `${this.theme.fonts.cellSize}px`;
+    o.style.color = this.theme.colors.cellText;
+    o.style.userSelect = 'none';
+    o.style.outline = 'none';
+    o.tabIndex = 0;
+
+    this.rebuildCalendar();
+
+    o.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  private rebuildCalendar(): void {
+    if (!this.overlay || !this.theme) return;
+    this.overlay.innerHTML = '';
+
+    const theme = this.theme;
+
+    // ── Header: < Month Year >
+    const header = document.createElement('div');
+    header.style.display = 'flex';
+    header.style.alignItems = 'center';
+    header.style.justifyContent = 'space-between';
+    header.style.padding = '8px';
+    header.style.borderBottom = `1px solid ${theme.colors.gridLine}`;
+
+    const prevBtn = this.createNavButton('◀', () => this.navigateMonth(-1));
+    const nextBtn = this.createNavButton('▶', () => this.navigateMonth(1));
+
+    const title = document.createElement('span');
+    title.style.fontWeight = 'bold';
+    const monthNames = this.locale?.datePicker?.monthNames ?? MONTH_NAMES;
+    title.textContent = `${monthNames[this.viewMonth]} ${this.viewYear}`;
+
+    header.appendChild(prevBtn);
+    header.appendChild(title);
+    header.appendChild(nextBtn);
+    this.overlay.appendChild(header);
+
+    // ── Day-of-week labels
+    const weekRow = document.createElement('div');
+    weekRow.style.display = 'grid';
+    weekRow.style.gridTemplateColumns = `repeat(${DAYS_IN_WEEK}, 1fr)`;
+    weekRow.style.padding = '4px 4px 0';
+
+    const weekLabels = this.locale?.datePicker?.weekLabels ?? WEEK_LABELS;
+    for (const label of weekLabels) {
+      const cell = document.createElement('div');
+      cell.style.textAlign = 'center';
+      cell.style.fontSize = '10px';
+      cell.style.color = theme.colors.headerText ?? theme.colors.cellText;
+      cell.style.padding = '2px 0';
+      cell.textContent = label;
+      weekRow.appendChild(cell);
+    }
+    this.overlay.appendChild(weekRow);
+
+    // ── Day grid
+    const daysGrid = document.createElement('div');
+    daysGrid.style.display = 'grid';
+    daysGrid.style.gridTemplateColumns = `repeat(${DAYS_IN_WEEK}, 1fr)`;
+    daysGrid.style.padding = '4px';
+    daysGrid.style.gap = '2px';
+
+    const firstDay = firstDayOfMonth(this.viewYear, this.viewMonth);
+    const totalDays = daysInMonth(this.viewYear, this.viewMonth);
+    const today = new Date();
+
+    for (let i = 0; i < firstDay; i++) {
+      daysGrid.appendChild(document.createElement('div'));
+    }
+
+    for (let day = 1; day <= totalDays; day++) {
+      const cell = document.createElement('div');
+      cell.textContent = String(day);
+      cell.style.textAlign = 'center';
+      cell.style.padding = '4px 0';
+      cell.style.borderRadius = '3px';
+      cell.style.cursor = 'pointer';
+      cell.dataset.day = String(day);
+
+      const cellDate = new Date(this.viewYear, this.viewMonth, day);
+
+      if (isSameDay(cellDate, today)) {
+        cell.style.border = `1px solid ${theme.colors.activeCellBorder}`;
+      }
+
+      if (this.selectedDate && isSameDay(cellDate, this.selectedDate)) {
+        cell.style.backgroundColor = theme.colors.activeCellBorder;
+        cell.style.color = '#fff';
+      }
+
+      if (day === this.focusedDay) {
+        if (!(this.selectedDate && isSameDay(cellDate, this.selectedDate))) {
+          cell.style.backgroundColor = theme.colors.selectionFill;
+        }
+      }
+
+      cell.addEventListener('mouseenter', () => {
+        if (!(this.selectedDate && isSameDay(cellDate, this.selectedDate))) {
+          cell.style.backgroundColor = theme.colors.selectionFill;
+        }
+      });
+      cell.addEventListener('mouseleave', () => {
+        if (this.selectedDate && isSameDay(cellDate, this.selectedDate)) {
+          cell.style.backgroundColor = theme.colors.activeCellBorder;
+        } else if (day === this.focusedDay) {
+          cell.style.backgroundColor = theme.colors.selectionFill;
+        } else {
+          cell.style.backgroundColor = '';
+        }
+      });
+
+      cell.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.focusedDay = day;
+        this.selectedDate = new Date(this.viewYear, this.viewMonth, day, this.hour, this.minute);
+        this.rebuildCalendar();
+        this.overlay?.focus();
+      });
+
+      daysGrid.appendChild(cell);
+    }
+
+    this.overlay.appendChild(daysGrid);
+
+    // ── Time controls
+    const timeRow = document.createElement('div');
+    timeRow.style.display = 'flex';
+    timeRow.style.alignItems = 'center';
+    timeRow.style.justifyContent = 'center';
+    timeRow.style.gap = '6px';
+    timeRow.style.padding = '6px 8px';
+    timeRow.style.borderTop = `1px solid ${theme.colors.gridLine}`;
+
+    const hourLabel = this.locale?.dateTimePicker?.hour ?? 'Hour';
+    const minuteLabel = this.locale?.dateTimePicker?.minute ?? 'Minute';
+
+    // Hour spin
+    const hourGroup = this.createSpinGroup(hourLabel, this.hour, 0, 23, (val) => {
+      this.hour = val;
+    });
+    this.hourInput = hourGroup.input;
+
+    // Separator
+    const sep = document.createElement('span');
+    sep.textContent = ':';
+    sep.style.fontWeight = 'bold';
+    sep.style.fontSize = '14px';
+
+    // Minute spin
+    const minuteGroup = this.createSpinGroup(minuteLabel, this.minute, 0, 59, (val) => {
+      this.minute = val;
+    });
+    this.minuteInput = minuteGroup.input;
+
+    timeRow.appendChild(hourGroup.el);
+    timeRow.appendChild(sep);
+    timeRow.appendChild(minuteGroup.el);
+    this.overlay.appendChild(timeRow);
+
+    // ── Footer: Now + Commit
+    const footer = document.createElement('div');
+    footer.style.display = 'flex';
+    footer.style.justifyContent = 'space-between';
+    footer.style.padding = '4px 8px 8px';
+    footer.style.borderTop = `1px solid ${theme.colors.gridLine}`;
+
+    const nowBtn = this.createFooterButton(
+      this.locale?.dateTimePicker?.now ?? 'Now',
+      () => {
+        const n = new Date();
+        this.viewYear = n.getFullYear();
+        this.viewMonth = n.getMonth();
+        this.focusedDay = n.getDate();
+        this.hour = n.getHours();
+        this.minute = n.getMinutes();
+        this.selectedDate = n;
+        this.rebuildCalendar();
+        this.overlay?.focus();
+      },
+    );
+
+    const okBtn = this.createFooterButton('OK', () => {
+      this.commitValue();
+    });
+    okBtn.style.fontWeight = 'bold';
+
+    footer.appendChild(nowBtn);
+    footer.appendChild(okBtn);
+    this.overlay.appendChild(footer);
+
+    // Apply focus highlight
+    this.applyFocusSectionStyle();
+  }
+
+  private createSpinGroup(
+    label: string,
+    value: number,
+    min: number,
+    max: number,
+    onChange: (val: number) => void,
+  ): { el: HTMLDivElement; input: HTMLInputElement } {
+    const theme = this.theme!;
+    const group = document.createElement('div');
+    group.style.display = 'flex';
+    group.style.flexDirection = 'column';
+    group.style.alignItems = 'center';
+    group.style.gap = '2px';
+
+    const lbl = document.createElement('div');
+    lbl.textContent = label;
+    lbl.style.fontSize = '9px';
+    lbl.style.color = theme.colors.headerText ?? theme.colors.cellText;
+    group.appendChild(lbl);
+
+    const upBtn = this.createSpinButton('▲', () => {
+      const next = value >= max ? min : value + 1;
+      onChange(next);
+      this.rebuildCalendar();
+      this.overlay?.focus();
+    });
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = pad2(value);
+    input.style.width = '32px';
+    input.style.textAlign = 'center';
+    input.style.border = `1px solid ${theme.colors.gridLine}`;
+    input.style.borderRadius = '3px';
+    input.style.padding = '2px 0';
+    input.style.fontSize = `${theme.fonts.cellSize}px`;
+    input.style.fontFamily = theme.fonts.cell;
+    input.style.color = theme.colors.cellText;
+    input.style.backgroundColor = theme.colors.cellEditBackground;
+    input.style.outline = 'none';
+
+    input.addEventListener('focus', (e) => {
+      (e.target as HTMLInputElement).select();
+    });
+    input.addEventListener('change', () => {
+      const parsed = parseInt(input.value, 10);
+      if (!isNaN(parsed)) {
+        const clamped = clamp(parsed, min, max);
+        onChange(clamped);
+        input.value = pad2(clamped);
+      } else {
+        input.value = pad2(value);
+      }
+    });
+    // Allow arrow keys on the input to increment/decrement
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        const next = value >= max ? min : value + 1;
+        onChange(next);
+        this.rebuildCalendar();
+        // Re-focus the corresponding input after rebuild
+        if (this.focusSection === 'hour') this.hourInput?.focus();
+        else if (this.focusSection === 'minute') this.minuteInput?.focus();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        const next = value <= min ? max : value - 1;
+        onChange(next);
+        this.rebuildCalendar();
+        if (this.focusSection === 'hour') this.hourInput?.focus();
+        else if (this.focusSection === 'minute') this.minuteInput?.focus();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        // Trigger change first
+        input.dispatchEvent(new Event('change'));
+        this.commitValue();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.close('escape');
+      } else if (e.key === 'Tab') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cycleFocus(e.shiftKey ? -1 : 1);
+      }
+    });
+
+    const downBtn = this.createSpinButton('▼', () => {
+      const next = value <= min ? max : value - 1;
+      onChange(next);
+      this.rebuildCalendar();
+      this.overlay?.focus();
+    });
+
+    group.appendChild(upBtn);
+    group.appendChild(input);
+    group.appendChild(downBtn);
+
+    return { el: group, input };
+  }
+
+  private createSpinButton(text: string, onClick: () => void): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.textContent = text;
+    btn.style.background = 'none';
+    btn.style.border = 'none';
+    btn.style.cursor = 'pointer';
+    btn.style.fontSize = '8px';
+    btn.style.padding = '0 4px';
+    btn.style.color = this.theme?.colors.cellText ?? '#333';
+    btn.style.lineHeight = '1';
+    btn.tabIndex = -1;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return btn;
+  }
+
+  private createNavButton(text: string, onClick: () => void): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.textContent = text;
+    btn.style.background = 'none';
+    btn.style.border = 'none';
+    btn.style.cursor = 'pointer';
+    btn.style.fontSize = '12px';
+    btn.style.padding = '4px 8px';
+    btn.style.color = this.theme?.colors.cellText ?? '#333';
+    btn.tabIndex = -1;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return btn;
+  }
+
+  private createFooterButton(text: string, onClick: () => void): HTMLButtonElement {
+    const theme = this.theme!;
+    const btn = document.createElement('button');
+    btn.textContent = text;
+    btn.style.background = 'none';
+    btn.style.border = `1px solid ${theme.colors.gridLine}`;
+    btn.style.borderRadius = '3px';
+    btn.style.padding = '2px 12px';
+    btn.style.cursor = 'pointer';
+    btn.style.fontSize = `${theme.fonts.cellSize}px`;
+    btn.style.fontFamily = theme.fonts.cell;
+    btn.style.color = theme.colors.cellText;
+    btn.tabIndex = -1;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return btn;
+  }
+
+  private applyFocusSectionStyle(): void {
+    if (!this.theme) return;
+    const activeShadow = `0 0 0 1px ${this.theme.colors.activeCellBorder}`;
+    if (this.hourInput) {
+      this.hourInput.style.boxShadow = this.focusSection === 'hour' ? activeShadow : '';
+    }
+    if (this.minuteInput) {
+      this.minuteInput.style.boxShadow = this.focusSection === 'minute' ? activeShadow : '';
+    }
+  }
+
+  private navigateMonth(delta: number): void {
+    this.viewMonth += delta;
+    if (this.viewMonth < 0) {
+      this.viewMonth = 11;
+      this.viewYear--;
+    } else if (this.viewMonth > 11) {
+      this.viewMonth = 0;
+      this.viewYear++;
+    }
+    const maxDays = daysInMonth(this.viewYear, this.viewMonth);
+    if (this.focusedDay > maxDays) this.focusedDay = maxDays;
+    this.rebuildCalendar();
+    this.overlay?.focus();
+  }
+
+  // ─── Focus cycling ──────────────────────────────────────
+
+  private cycleFocus(direction: number): void {
+    const sections: FocusSection[] = ['calendar', 'hour', 'minute'];
+    const idx = sections.indexOf(this.focusSection);
+    const next = (idx + direction + sections.length) % sections.length;
+    this.focusSection = sections[next];
+    this.applyFocusSectionStyle();
+
+    if (this.focusSection === 'hour' && this.hourInput) {
+      this.hourInput.focus();
+    } else if (this.focusSection === 'minute' && this.minuteInput) {
+      this.minuteInput.focus();
+    } else {
+      this.overlay?.focus();
+    }
+  }
+
+  // ─── Keyboard ──────────────────────────────────────
+
+  private handleKeyDown = (e: KeyboardEvent): void => {
+    // If an input has focus, let it handle its own keys (handled in createSpinGroup)
+    if (e.target instanceof HTMLInputElement) return;
+
+    e.stopPropagation();
+
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        this.close('escape');
+        break;
+      case 'Enter':
+        e.preventDefault();
+        this.commitValue();
+        break;
+      case 'Tab':
+        e.preventDefault();
+        this.cycleFocus(e.shiftKey ? -1 : 1);
+        break;
+      case 'ArrowLeft':
+        if (this.focusSection === 'calendar') {
+          e.preventDefault();
+          this.moveFocus(-1);
+        }
+        break;
+      case 'ArrowRight':
+        if (this.focusSection === 'calendar') {
+          e.preventDefault();
+          this.moveFocus(1);
+        }
+        break;
+      case 'ArrowUp':
+        if (this.focusSection === 'calendar') {
+          e.preventDefault();
+          this.moveFocus(-7);
+        }
+        break;
+      case 'ArrowDown':
+        if (this.focusSection === 'calendar') {
+          e.preventDefault();
+          this.moveFocus(7);
+        }
+        break;
+    }
+  };
+
+  private moveFocus(delta: number): void {
+    const newDay = this.focusedDay + delta;
+    const maxDays = daysInMonth(this.viewYear, this.viewMonth);
+
+    if (newDay < 1) {
+      this.navigateMonth(-1);
+      const prevMaxDays = daysInMonth(this.viewYear, this.viewMonth);
+      this.focusedDay = prevMaxDays + newDay;
+      this.rebuildCalendar();
+      this.overlay?.focus();
+      return;
+    }
+    if (newDay > maxDays) {
+      const overflow = newDay - maxDays;
+      this.navigateMonth(1);
+      this.focusedDay = overflow;
+      this.rebuildCalendar();
+      this.overlay?.focus();
+      return;
+    }
+
+    this.focusedDay = newDay;
+    this.rebuildCalendar();
+    this.overlay?.focus();
+  }
+}
diff --git a/packages/core/src/editing/inline-editor.ts b/packages/core/src/editing/inline-editor.ts
index 6867441..cf36e06 100644
--- a/packages/core/src/editing/inline-editor.ts
+++ b/packages/core/src/editing/inline-editor.ts
@@ -224,14 +224,20 @@ export class InlineEditor {
 
     if (this.currentMergeRegion) {
       // For merged cells, compute rect spanning the full region
-      const startRect = le.getCellRect(this.currentMergeRegion.startRow, this.currentMergeRegion.startCol);
-      const endRect = le.getCellRect(this.currentMergeRegion.endRow, this.currentMergeRegion.endCol);
+      const startRect = le.getCellRect(
+        this.currentMergeRegion.startRow,
+        this.currentMergeRegion.startCol,
+      );
+      const endRect = le.getCellRect(
+        this.currentMergeRegion.endRow,
+        this.currentMergeRegion.endCol,
+      );
       const scrollXOffset = this.currentCol < frozenCols ? 0 : sm.scrollX;
       const scrollYOffset = this.currentRow < frozenRows ? 0 : sm.scrollY;
       x = startRect.x - scrollXOffset;
       y = startRect.y - scrollYOffset;
-      width = (endRect.x + endRect.width) - startRect.x;
-      height = (endRect.y + endRect.height) - startRect.y;
+      width = endRect.x + endRect.width - startRect.x;
+      height = endRect.y + endRect.height - startRect.y;
     } else {
       // getCellRect returns absolute coordinates (including header/rowNumber offsets)
       const cellRect = le.getCellRect(this.currentRow, this.currentCol);
diff --git a/packages/core/src/engine/spreadsheet-engine.ts b/packages/core/src/engine/spreadsheet-engine.ts
index 52d927b..24a90ba 100644
--- a/packages/core/src/engine/spreadsheet-engine.ts
+++ b/packages/core/src/engine/spreadsheet-engine.ts
@@ -68,6 +68,17 @@ import { createDefaultMenuItems } from '../context-menu/default-items';
 import { RowGroupManager } from '../grouping/row-group-manager';
 import type { RowGroupDef, ColumnAggregate } from '../grouping/row-group-manager';
 import { RowGroupToggleLayer } from '../renderer/layers/row-group-toggle-layer';
+import { AutoRowSizeManager } from '../auto-row-size/auto-row-size-manager';
+import type { AutoRowSizeConfig } from '../auto-row-size/auto-row-size-manager';
+import { CellTextLayer } from '../renderer/layers/cell-text-layer';
+import { ColumnStretchManager } from '../resize/column-stretch-manager';
+import { CellEditorRegistry } from '../editing/cell-editor-registry';
+import { DatePickerEditor } from '../editing/date-picker-editor';
+import { DateTimeEditor } from '../editing/date-time-editor';
+import type { CellEditor, CellEditorContext } from '../editing/cell-editor';
+import type { SpreadsheetLocale } from '../locale/locale-types';
+import { resolveLocale } from '../locale/resolve-locale';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
 // Plugin API implementation for per-plugin state isolation
 class SpreadsheetPluginAPI implements PluginAPI {
@@ -137,6 +148,12 @@ export interface SpreadsheetEngineConfig {
   showRowNumbers?: boolean;
   /** Visual theme (default: lightTheme). */
   theme?: SpreadsheetTheme;
+  /** Enable automatic row height based on cell content (default: false). */
+  autoRowHeight?: boolean | AutoRowSizeConfig;
+  /** Stretch columns to fill container width. 'all' distributes evenly, 'last' stretches last column. */
+  stretchColumns?: 'all' | 'last';
+  /** Locale for built-in UI strings. Defaults to English. */
+  locale?: SpreadsheetLocale;
 }
 
 export class SpreadsheetEngine {
@@ -175,15 +192,23 @@ export class SpreadsheetEngine {
   private contextMenuManager: ContextMenuManager | null = null;
   private ariaManager: AriaManager | null = null;
   private printManager: PrintManager | null = null;
+  private autoRowSizeManager: AutoRowSizeManager | null = null;
+  private columnStretchManager: ColumnStretchManager | null = null;
+  private cellEditorRegistry: CellEditorRegistry = new CellEditorRegistry();
+  private activeOverlayEditor: CellEditor | null = null;
+  /** Guard against infinite measure→render→measure loops. */
+  private _inAutoMeasure = false;
   private readonly plugins = new Map<string, SpreadsheetPlugin>();
   private readonly pluginAPIs = new Map<string, SpreadsheetPluginAPI>();
   private _isDraggingSelection = false;
   private mounted = false;
   private currentTheme: SpreadsheetTheme;
+  private resolvedLocale: ResolvedLocale;
 
   constructor(config: SpreadsheetEngineConfig) {
     this.config = config;
     this.currentTheme = config.theme ?? lightTheme;
+    this.resolvedLocale = resolveLocale(config.locale);
     this.cellStore = new CellStore();
     this.rowStore = new RowStore();
     this.eventBus = new EventBus();
@@ -211,6 +236,12 @@ export class SpreadsheetEngine {
     // Create RowGroupManager for row grouping
     this.rowGroupManager = new RowGroupManager();
     this.rowGroupManager.setCellStore(this.cellStore);
+    this.rowGroupManager.setLocale(this.resolvedLocale);
+
+    // Apply format locale to cell type registry
+    if (this.resolvedLocale.formatLocale) {
+      this.cellTypeRegistry.setFormatLocale(this.resolvedLocale.formatLocale);
+    }
 
     // Create change tracker and validation engine early (before commands)
     this.changeTracker = new ChangeTracker({
@@ -329,6 +360,26 @@ export class SpreadsheetEngine {
 
     // Wire merge manager into render pipeline
     this.gridRenderer.setMergeManager(this.mergeManager);
+    this.gridRenderer.setLocale(this.resolvedLocale);
+
+    // Create auto row size manager if enabled
+    if (this.config.autoRowHeight) {
+      const autoConfig =
+        typeof this.config.autoRowHeight === 'object' ? this.config.autoRowHeight : {};
+      this.autoRowSizeManager = new AutoRowSizeManager(
+        {
+          ...autoConfig,
+          minRowHeight: autoConfig.minRowHeight ?? theme.dimensions.rowHeight,
+        },
+        (updates) => this.setAutoRowHeights(updates),
+      );
+
+      // Register render layers that can measure heights
+      const cellTextLayer = this.gridRenderer.getLayer(CellTextLayer);
+      if (cellTextLayer) {
+        this.autoRowSizeManager.setLayers([cellTextLayer]);
+      }
+    }
 
     // Create scroll manager for native scrollbar behavior
     this.scrollManager = new ScrollManager({
@@ -380,9 +431,7 @@ export class SpreadsheetEngine {
         if (!this.canvasManager || !this.layoutEngine) return 10;
         const viewportHeight = this.canvasManager.getCssHeight();
         const frozenRows = this.config.frozenRows ?? 0;
-        const frozenH = frozenRows > 0
-          ? this.layoutEngine.getFrozenRowsHeight(frozenRows)
-          : 0;
+        const frozenH = frozenRows > 0 ? this.layoutEngine.getFrozenRowsHeight(frozenRows) : 0;
         return Math.floor(
           (viewportHeight - this.layoutEngine.headerHeight - frozenH) / this.layoutEngine.rowHeight,
         );
@@ -432,6 +481,13 @@ export class SpreadsheetEngine {
       },
     });
 
+    // Register built-in DatePicker editor for date columns via CellEditorRegistry
+    const datePickerEditor = new DatePickerEditor();
+    this.cellEditorRegistry.registerForType(datePickerEditor, 'date', 0);
+    const dateTimeEditor = new DateTimeEditor();
+    this.cellEditorRegistry.registerForType(dateTimeEditor, 'datetime', 0);
+    this.cellEditorRegistry.setLocale(this.resolvedLocale);
+
     // Wire merge manager into selection, keyboard navigator, and inline editor
     this.selectionManager.setMergeManager(this.mergeManager);
     this.keyboardNavigator.setMergeManager(this.mergeManager);
@@ -460,6 +516,7 @@ export class SpreadsheetEngine {
         this.removeColumnFilter(col);
       },
     });
+    this.filterPanel.setLocale(this.resolvedLocale);
 
     // Create clipboard manager for copy/cut/paste
     this.clipboardManager = new ClipboardManager({
@@ -468,7 +525,7 @@ export class SpreadsheetEngine {
       selectionManager: this.selectionManager,
       commandManager: this.commandManager,
       eventBus: this.eventBus,
-      isEditing: () => this.inlineEditor?.isEditing ?? false,
+      isEditing: () => (this.inlineEditor?.isEditing ?? false) || (this.activeOverlayEditor?.isOpen ?? false),
       onDataChange: () => {
         if (this.dirtyTracker) this.dirtyTracker.markDirty('cell-update');
         if (this.renderScheduler) this.renderScheduler.requestRender();
@@ -483,7 +540,7 @@ export class SpreadsheetEngine {
       eventBus: this.eventBus,
       theme,
     });
-    for (const item of createDefaultMenuItems()) {
+    for (const item of createDefaultMenuItems(this.resolvedLocale)) {
       this.contextMenuManager.registerItem(item);
     }
 
@@ -498,6 +555,7 @@ export class SpreadsheetEngine {
       rowCount,
     });
     this.ariaManager.attach();
+    this.ariaManager.setLocale(this.resolvedLocale);
 
     // Create print manager for @media print support
     this.printManager = new PrintManager({
@@ -509,6 +567,7 @@ export class SpreadsheetEngine {
       theme: this.currentTheme,
     });
     this.printManager.attach();
+    this.printManager.setLocale(this.resolvedLocale);
 
     // Create column resize manager for drag-to-resize columns
     this.columnResizeManager = new ColumnResizeManager({
@@ -532,6 +591,16 @@ export class SpreadsheetEngine {
     });
     this.columnResizeManager.attach(this.scrollManager.getElement());
 
+    // Hook column resize end into stretch manager
+    this.eventBus.on('columnResizeEnd', (event) => {
+      if (this.columnStretchManager) {
+        this.columnStretchManager.markManualResize(event.colIndex);
+        this.applyColumnStretch();
+        if (this.dirtyTracker) this.dirtyTracker.markDirty('full');
+        if (this.renderScheduler) this.renderScheduler.requestRender();
+      }
+    });
+
     // Create row resize manager for drag-to-resize rows
     this.rowResizeManager = new RowResizeManager({
       layoutEngine: this.layoutEngine,
@@ -572,13 +641,10 @@ export class SpreadsheetEngine {
     this.autofillManager.attach(this.scrollManager.getElement());
 
     // Add fill handle layer to render pipeline (after selection overlay)
-    this.gridRenderer.addLayer(new FillHandleLayer(this.autofillManager), 'content');
+    this.gridRenderer.addLayer(new FillHandleLayer(this.autofillManager));
 
     // Add row group toggle layer to render pipeline
-    this.gridRenderer.addLayer(
-      new RowGroupToggleLayer(this.rowGroupManager, this.dataView),
-      'content',
-    );
+    this.gridRenderer.addLayer(new RowGroupToggleLayer(this.rowGroupManager, this.dataView));
 
     // Observe container resizes to update canvas dimensions
     this.resizeObserver = new ResizeObserver(() => {
@@ -586,6 +652,24 @@ export class SpreadsheetEngine {
     });
     this.resizeObserver.observe(container);
 
+    // Set up column stretch manager if configured
+    if (this.config.stretchColumns) {
+      this.columnStretchManager = new ColumnStretchManager(
+        { mode: this.config.stretchColumns },
+        (updates) => {
+          if (!this.layoutEngine || !this.gridRenderer) return;
+          this.layoutEngine.setColumnWidthsBatch(updates);
+          const geometry = this.gridRenderer.getGeometry();
+          for (const [colIndex, width] of updates) {
+            geometry.setColumnWidth(colIndex, width);
+          }
+        },
+      );
+    }
+
+    // Apply column stretch before first render (needs container width from syncSize)
+    this.applyColumnStretch();
+
     // Initial render
     this.dirtyTracker.markDirty('full');
     this.executeRender();
@@ -597,6 +681,25 @@ export class SpreadsheetEngine {
       const api = this.pluginAPIs.get(name)!;
       plugin.install(api);
     }
+
+    // Start async measurement sweep for off-screen rows
+    if (this.autoRowSizeManager) {
+      this.startAutoMeasureSweep();
+
+      // Column resize: mark all rows dirty for wrap-enabled columns
+      this.eventBus.on('columnResize', (event) => {
+        if (!this.autoRowSizeManager) return;
+        const col = this.config.columns[event.colIndex];
+        if (col?.wrapText) {
+          this.autoRowSizeManager.markAllDirty();
+          this.startDirtyMeasureSweep();
+        }
+      });
+
+      // Row manual resize: row now has manual override, auto height is suppressed
+      // No action needed — RowStore.setHeight marks it as manual, and
+      // measureViewport/startAsyncMeasurement skip manual rows via isManual()
+    }
   }
 
   /**
@@ -607,6 +710,8 @@ export class SpreadsheetEngine {
 
     this.canvasManager.syncSize();
 
+    this.applyColumnStretch();
+
     if (this.dirtyTracker) {
       this.dirtyTracker.markDirty('full');
     }
@@ -614,6 +719,22 @@ export class SpreadsheetEngine {
     this.executeRender();
   }
 
+  /** Recalculate column stretch distribution based on current container width. */
+  private applyColumnStretch(): void {
+    if (!this.columnStretchManager || !this.layoutEngine || !this.canvasManager) return;
+
+    const showRowNumbers = this.config.showRowNumbers ?? true;
+    const rowNumberWidth = showRowNumbers ? this.currentTheme.dimensions.rowNumberWidth : 0;
+    const containerWidth = this.canvasManager.getCssWidth() - rowNumberWidth;
+
+    this.columnStretchManager.recalculate(
+      this.config.columns,
+      containerWidth,
+      this.config.frozenColumns ?? 0,
+      (colIndex) => this.layoutEngine!.getColumnWidth(colIndex),
+    );
+  }
+
   /** Handle mouse click for selection. */
   private handleGridMouseDown = (event: GridMouseEvent): void => {
     // Ignore right-click for selection (contextmenu handles it)
@@ -623,6 +744,10 @@ export class SpreadsheetEngine {
     if (this.inlineEditor?.isEditing) {
       this.inlineEditor.commitAndClose('blur');
     }
+    // Close overlay editor (date picker, etc.) on grid click
+    if (this.activeOverlayEditor?.isOpen) {
+      this.activeOverlayEditor.close('blur');
+    }
 
     const { region, row, col, shiftKey, ctrlKey } = event;
 
@@ -672,7 +797,11 @@ export class SpreadsheetEngine {
   private handleGridMouseHover = (event: GridMouseEvent): void => {
     const el = this.scrollManager?.getElement();
     if (!el) return;
-    if (event.region === 'header-sort-icon' || event.region === 'header-filter-icon' || event.region === 'row-group-toggle') {
+    if (
+      event.region === 'header-sort-icon' ||
+      event.region === 'header-filter-icon' ||
+      event.region === 'row-group-toggle'
+    ) {
       el.style.cursor = 'pointer';
     } else {
       el.style.cursor = '';
@@ -690,6 +819,8 @@ export class SpreadsheetEngine {
   private handleGridKeyDown = (event: GridKeyboardEvent): void => {
     // Don't navigate while editing — the textarea handles its own keyboard events
     if (this.inlineEditor?.isEditing) return;
+    // Don't navigate while overlay editor is open
+    if (this.activeOverlayEditor?.isOpen) return;
 
     const keyLower = event.key.toLowerCase();
 
@@ -714,7 +845,7 @@ export class SpreadsheetEngine {
     if (event.key === 'F2') {
       event.originalEvent.preventDefault();
       const { row, col } = this.selectionManager.getSelection().activeCell;
-      this.inlineEditor?.open(row, col);
+      this.openCellEditor(row, col);
       return;
     }
 
@@ -727,16 +858,26 @@ export class SpreadsheetEngine {
     }
 
     // Type-to-edit: printable character (not Ctrl+key) opens editor with that character
+    // Overlay editors (date picker, etc.) use structured input, not free-text
     if (!event.ctrlKey && event.key.length === 1 && this.inlineEditor) {
       event.originalEvent.preventDefault();
       const { row, col } = this.selectionManager.getSelection().activeCell;
-      this.inlineEditor.open(row, col, event.key);
+      const visibleCols = this.config.columns.filter((c) => !c.hidden);
+      const column = visibleCols[col];
+      const physRow = this.dataView.getPhysicalRow(row);
+      const cellData = this.cellStore.get(physRow, col);
+      const value = cellData?.value ?? null;
+      if (column && this.cellEditorRegistry.resolve(column, value)) {
+        this.openCellEditor(row, col);
+      } else {
+        this.inlineEditor.open(row, col, event.key);
+      }
     }
   };
 
   /** Handle double-click to open editor. */
   private handleCellDoubleClick = (event: CellEvent): void => {
-    this.inlineEditor?.open(event.row, event.col);
+    this.openCellEditor(event.row, event.col);
   };
 
   /** Handle editor close: navigate and refocus based on close reason. */
@@ -791,6 +932,90 @@ export class SpreadsheetEngine {
     this.scrollCellIntoView(nextRow, nextCol);
   }
 
+  /**
+   * Open the appropriate editor for a cell — overlay editor from registry, or InlineEditor fallback.
+   */
+  private openCellEditor(row: number, col: number): void {
+    // Close any active editor first
+    if (this.inlineEditor?.isEditing) {
+      this.inlineEditor.commitAndClose('programmatic');
+    }
+    if (this.activeOverlayEditor?.isOpen) {
+      this.activeOverlayEditor.close('programmatic');
+    }
+
+    const visibleCols = this.config.columns.filter((c) => !c.hidden);
+    const column = visibleCols[col];
+    if (!column) return;
+
+    const physRow = this.dataView.getPhysicalRow(row);
+    const cellData = this.cellStore.get(physRow, col);
+    const value = cellData?.value ?? null;
+
+    const editor = this.cellEditorRegistry.resolve(column, value);
+    if (editor) {
+      if (!this.scrollManager || !this.layoutEngine) return;
+      const container = this.scrollManager.getElement().parentElement;
+      if (!container) return;
+
+      const context: CellEditorContext = {
+        row,
+        col,
+        value,
+        column,
+        container,
+        scrollContainer: this.scrollManager.getElement(),
+        layoutEngine: this.layoutEngine,
+        scrollManager: this.scrollManager,
+        cellStore: this.cellStore,
+        dataView: this.dataView,
+        theme: this.currentTheme,
+        locale: this.resolvedLocale,
+        mergeManager: this.mergeManager,
+        frozenRows: this.config.frozenRows ?? 0,
+        frozenColumns: this.config.frozenColumns ?? 0,
+      };
+
+      const commitFn = (r: number, c: number, oldValue: CellValue, newValue: CellValue) => {
+        const pRow = this.dataView.getPhysicalRow(r);
+        const command = new CellEditCommand(this.cellStore, pRow, c, oldValue, newValue);
+        this.commandManager.execute(command);
+        this.eventBus.emit('commandExecute', { description: command.description });
+
+        const vc = this.config.columns.filter((col) => !col.hidden);
+        const col2 = vc[c];
+        if (col2) {
+          this.eventBus.emit('cellChange', {
+            row: r,
+            col: c,
+            value: newValue,
+            column: col2,
+            oldValue,
+            newValue,
+            source: 'edit',
+          });
+        }
+        if (this.dirtyTracker) {
+          this.dirtyTracker.markCellDirty(r, c);
+        }
+        if (this.renderScheduler) {
+          this.renderScheduler.requestRender();
+        }
+      };
+
+      const closeFn = (reason: EditorCloseReason) => {
+        this.activeOverlayEditor = null;
+        this.handleEditorClose(reason);
+      };
+
+      this.activeOverlayEditor = editor;
+      editor.open(context, commitFn, closeFn);
+    } else {
+      // Fallback: InlineEditor (textarea)
+      this.inlineEditor?.open(row, col);
+    }
+  }
+
   /** Undo the last command and trigger re-render. */
   private handleUndo(): void {
     const command = this.commandManager.undo();
@@ -845,9 +1070,7 @@ export class SpreadsheetEngine {
 
     // Vertical: skip if cell is in frozen rows (always visible)
     if (row >= frozenRows) {
-      const frozenH = frozenRows > 0
-        ? this.layoutEngine.getFrozenRowsHeight(frozenRows)
-        : 0;
+      const frozenH = frozenRows > 0 ? this.layoutEngine.getFrozenRowsHeight(frozenRows) : 0;
       const cellTop = this.layoutEngine.getRowY(row);
       const cellBottom = cellTop + this.layoutEngine.getRowHeight(row);
       // Scrollable area starts after frozen rows
@@ -863,9 +1086,7 @@ export class SpreadsheetEngine {
 
     // Horizontal: skip if cell is in frozen columns (always visible)
     if (col >= frozenCols) {
-      const frozenW = frozenCols > 0
-        ? this.layoutEngine.getFrozenColsWidth(frozenCols)
-        : 0;
+      const frozenW = frozenCols > 0 ? this.layoutEngine.getFrozenColsWidth(frozenCols) : 0;
       const colX = this.layoutEngine.getColumnX(col);
       const colW = this.layoutEngine.getColumnWidth(col);
       const cellLeft = colX;
@@ -913,6 +1134,17 @@ export class SpreadsheetEngine {
     this.commandManager.clear();
     this.eventBus.emit('destroy');
 
+    // Destroy auto row size manager
+    if (this.autoRowSizeManager) {
+      this.autoRowSizeManager.destroy();
+      this.autoRowSizeManager = null;
+    }
+
+    if (this.columnStretchManager) {
+      this.columnStretchManager.destroy();
+      this.columnStretchManager = null;
+    }
+
     // Destroy clipboard manager
     if (this.clipboardManager) {
       this.clipboardManager.detach();
@@ -967,6 +1199,10 @@ export class SpreadsheetEngine {
       this.inlineEditor = null;
     }
 
+    // Destroy cell editor registry (all registered editors)
+    this.cellEditorRegistry.destroy();
+    this.activeOverlayEditor = null;
+
     // Destroy filter panel
     if (this.filterPanel) {
       this.filterPanel.destroy();
@@ -1020,6 +1256,10 @@ export class SpreadsheetEngine {
     if (this.dirtyTracker) {
       this.dirtyTracker.markCellDirty(row, col);
     }
+    // Mark row dirty for auto row height re-measurement
+    if (this.autoRowSizeManager) {
+      this.autoRowSizeManager.markDirtyRows([row]);
+    }
     if (this.renderScheduler) {
       this.renderScheduler.requestRender();
     }
@@ -1046,6 +1286,142 @@ export class SpreadsheetEngine {
     if (this.renderScheduler) this.renderScheduler.requestRender();
   }
 
+  /**
+   * Set auto-measured row heights in batch. Only updates rows without manual overrides.
+   * Uses batch layout update for O(n) instead of O(n²) position recomputation.
+   * Applies scroll compensation when heights change above the viewport.
+   */
+  setAutoRowHeights(updates: Map<number, number>): void {
+    const changed = this.rowStore.setAutoHeightsBatch(updates, this.layoutEngine?.rowHeight ?? 28);
+    if (changed.size === 0) return;
+
+    // Scroll compensation: record position of top visible row before layout change
+    const scrollY = this.scrollManager?.scrollY ?? 0;
+    let anchorRow = -1;
+    let anchorOldY = 0;
+    if (this.layoutEngine && this.viewportManager && scrollY > 0) {
+      anchorRow = this.layoutEngine.getRowAtY(scrollY);
+      if (anchorRow >= 0) {
+        anchorOldY = this.layoutEngine.getRowY(anchorRow);
+      }
+    }
+
+    if (this.layoutEngine) {
+      // Build layout updates from changed rows (effective heights)
+      const layoutUpdates = new Map<number, number>();
+      for (const row of changed) {
+        layoutUpdates.set(row, this.rowStore.getHeight(row, this.layoutEngine.rowHeight));
+      }
+      this.layoutEngine.setRowHeightsBatch(layoutUpdates);
+    }
+    this.syncScrollDimensions();
+
+    // Scroll compensation: adjust scroll position if anchor row shifted
+    if (anchorRow >= 0 && this.layoutEngine && this.scrollManager) {
+      const anchorNewY = this.layoutEngine.getRowY(anchorRow);
+      const delta = anchorNewY - anchorOldY;
+      if (Math.abs(delta) > 0.5) {
+        this.scrollManager.scrollTo(this.scrollManager.scrollX, scrollY + delta);
+      }
+    }
+
+    if (this.dirtyTracker) this.dirtyTracker.markDirty('full');
+    if (this.renderScheduler) this.renderScheduler.requestRender();
+  }
+
+  /**
+   * Start async row height measurement sweep for all off-screen rows.
+   * Uses requestIdleCallback to avoid blocking the main thread.
+   */
+  private startAutoMeasureSweep(): void {
+    if (!this.autoRowSizeManager || !this.gridRenderer || !this.layoutEngine) return;
+
+    const totalRows = this.layoutEngine.rowCount;
+    this.autoRowSizeManager.startAsyncMeasurement(
+      totalRows,
+      this.buildAutoMeasureContext(),
+      this.rowStore,
+    );
+  }
+
+  /**
+   * Start async measurement only for dirty rows.
+   * More efficient than full sweep when a few rows changed (e.g. cell edit).
+   */
+  private startDirtyMeasureSweep(): void {
+    if (!this.autoRowSizeManager || !this.gridRenderer || !this.layoutEngine) return;
+
+    if (this.autoRowSizeManager.isAllDirty) {
+      // Full sweep needed (e.g. theme/font change)
+      this.startAutoMeasureSweep();
+      return;
+    }
+
+    if (!this.autoRowSizeManager.hasDirtyRows) return;
+
+    this.autoRowSizeManager.startDirtyMeasurement(this.buildAutoMeasureContext(), this.rowStore);
+  }
+
+  /** Build a RenderContext factory for auto row height measurement. */
+  private buildAutoMeasureContext(): (
+    startRow: number,
+    endRow: number,
+  ) => import('../renderer/render-layer').RenderContext | null {
+    const geometry = this.gridRenderer!.getGeometry();
+    const visibleColCount = this.config.columns.filter((c) => !c.hidden).length;
+
+    return (startRow: number, endRow: number) => {
+      if (!this.canvasManager || !this.gridRenderer) return null;
+      const ctx = this.canvasManager.getContext();
+      const viewport: import('../renderer/viewport-manager').ViewportRange = {
+        startRow,
+        endRow,
+        startCol: 0,
+        endCol: visibleColCount - 1,
+        visibleRowCount: endRow - startRow + 1,
+        visibleColCount,
+      };
+      return {
+        ctx,
+        geometry,
+        theme: this.currentTheme,
+        canvasWidth: this.canvasManager.getCssWidth(),
+        canvasHeight: this.canvasManager.getCssHeight(),
+        viewport,
+        scrollX: 0,
+        scrollY: 0,
+        renderMode: 'full' as import('../renderer/render-layer').RenderMode,
+        paneRegion: 'full' as import('../renderer/render-layer').PaneRegion,
+        mergeManager: this.mergeManager,
+      };
+    };
+  }
+
+  /**
+   * Notify auto row size manager that specific rows need re-measurement.
+   * Triggers async dirty measurement if auto row height is enabled.
+   */
+  markAutoRowHeightDirty(rows: number[]): void {
+    if (!this.autoRowSizeManager || rows.length === 0) return;
+    this.autoRowSizeManager.markDirtyRows(rows);
+    this.startDirtyMeasureSweep();
+  }
+
+  /**
+   * Notify auto row size manager that all rows need re-measurement.
+   * Used for theme/font changes that affect all row heights.
+   */
+  markAllAutoRowHeightDirty(): void {
+    if (!this.autoRowSizeManager) return;
+    this.autoRowSizeManager.markAllDirty();
+    this.startAutoMeasureSweep();
+  }
+
+  /** Get the auto row size manager instance (null if autoRowHeight is disabled). */
+  getAutoRowSizeManager(): AutoRowSizeManager | null {
+    return this.autoRowSizeManager;
+  }
+
   // Command API
   getCommandManager(): CommandManager {
     return this.commandManager;
@@ -1156,7 +1532,12 @@ export class SpreadsheetEngine {
 
     if ((frozenRows > 0 || frozenColumns > 0) && this.layoutEngine) {
       const frozenRanges = this.viewportManager.computeFrozenRanges(
-        scrollX, scrollY, width, height, frozenRows, frozenColumns,
+        scrollX,
+        scrollY,
+        width,
+        height,
+        frozenRows,
+        frozenColumns,
       );
       this.gridRenderer.setFrozenConfig({
         frozenRows,
@@ -1175,12 +1556,60 @@ export class SpreadsheetEngine {
     if (dirtyCells && this.gridRenderer) {
       const dirtyRects = this.computeDirtyRects(dirtyCells, scrollX, scrollY);
       if (dirtyRects.length > 0) {
-        this.gridRenderer.renderPartial(ctx, viewport, width, height, scrollX, scrollY, dirtyRects, renderMode);
+        this.gridRenderer.renderPartial(
+          ctx,
+          viewport,
+          width,
+          height,
+          scrollX,
+          scrollY,
+          dirtyRects,
+          renderMode,
+        );
         return;
       }
     }
 
     this.gridRenderer.render(ctx, viewport, width, height, scrollX, scrollY, renderMode);
+
+    // Post-render: measure visible rows for auto row height
+    this.autoMeasureViewport(ctx, viewport, width, height, scrollX, scrollY);
+  }
+
+  /**
+   * Measure visible row heights after render and apply auto heights.
+   * Uses a guard flag to prevent infinite measure→render→measure loops.
+   */
+  private autoMeasureViewport(
+    ctx: CanvasRenderingContext2D,
+    viewport: import('../renderer/viewport-manager').ViewportRange,
+    canvasWidth: number,
+    canvasHeight: number,
+    scrollX: number,
+    scrollY: number,
+  ): void {
+    if (!this.autoRowSizeManager || this._inAutoMeasure || !this.gridRenderer) return;
+
+    this._inAutoMeasure = true;
+    try {
+      const geometry = this.gridRenderer.getGeometry();
+      const rc: import('../renderer/render-layer').RenderContext = {
+        ctx,
+        geometry,
+        theme: this.currentTheme,
+        canvasWidth,
+        canvasHeight,
+        viewport,
+        scrollX,
+        scrollY,
+        renderMode: 'full',
+        paneRegion: 'full',
+        mergeManager: this.mergeManager,
+      };
+      this.autoRowSizeManager.measureViewport(rc, this.rowStore);
+    } finally {
+      this._inAutoMeasure = false;
+    }
   }
 
   /**
@@ -1393,7 +1822,6 @@ export class SpreadsheetEngine {
     this.gridRenderer?.setFilterState(this.filterEngine.getFilteredColumns());
 
     // Update selection bounds for visible row count (after all pipeline stages)
-    const totalRows = this.dataView.totalRowCount;
     const visibleRows = this.dataView.visibleRowCount;
     this.selectionManager?.setRowCount(visibleRows);
 
@@ -1548,6 +1976,7 @@ export class SpreadsheetEngine {
   setRowGroups(groups: RowGroupDef[]): void {
     this.rowGroupManager.setGroups(groups);
     this.applyFilterAndSortToDataView();
+    this.markAllAutoRowHeightDirty();
     this.eventBus.emit('rowGroupChange', { groupHeaders: this.rowGroupManager.getGroupHeaders() });
     this.dirtyTracker?.markDirty('full');
     this.renderScheduler?.requestRender();
@@ -1563,6 +1992,7 @@ export class SpreadsheetEngine {
   expandAllGroups(): void {
     this.rowGroupManager.expandAll();
     this.applyFilterAndSortToDataView();
+    this.markAllAutoRowHeightDirty();
     this.dirtyTracker?.markDirty('full');
     this.renderScheduler?.requestRender();
   }
@@ -1571,6 +2001,7 @@ export class SpreadsheetEngine {
   collapseAllGroups(): void {
     this.rowGroupManager.collapseAll();
     this.applyFilterAndSortToDataView();
+    this.markAllAutoRowHeightDirty();
     this.dirtyTracker?.markDirty('full');
     this.renderScheduler?.requestRender();
   }
@@ -1579,6 +2010,7 @@ export class SpreadsheetEngine {
   clearRowGroups(): void {
     this.rowGroupManager.clear();
     this.applyFilterAndSortToDataView();
+    this.markAllAutoRowHeightDirty();
     this.eventBus.emit('rowGroupChange', { groupHeaders: [] });
     this.dirtyTracker?.markDirty('full');
     this.renderScheduler?.requestRender();
@@ -1607,6 +2039,7 @@ export class SpreadsheetEngine {
     if (!this.rowGroupManager.isGroupHeader(phys)) return;
     const expanded = this.rowGroupManager.toggleGroup(phys);
     this.applyFilterAndSortToDataView();
+    this.markAllAutoRowHeightDirty();
     this.eventBus.emit('rowGroupToggle', { headerRow: phys, expanded });
     this.dirtyTracker?.markDirty('full');
     this.renderScheduler?.requestRender();
@@ -1637,10 +2070,7 @@ export class SpreadsheetEngine {
   }
 
   /** Add a render layer to the pipeline (appended after existing layers). */
-  addRenderLayer(
-    layer: import('../renderer/render-layer').RenderLayer,
-    _target?: string,
-  ): void {
+  addRenderLayer(layer: import('../renderer/render-layer').RenderLayer, _target?: string): void {
     this.gridRenderer?.addLayer(layer);
   }
 
@@ -1691,6 +2121,7 @@ export class SpreadsheetEngine {
 
     // Propagate to DOM overlay subsystems
     this.inlineEditor?.setTheme(theme);
+    this.cellEditorRegistry.setTheme(theme);
     this.filterPanel?.setTheme(theme);
     this.contextMenuManager?.setTheme(theme);
     this.tooltipManager?.setTheme(theme);
@@ -1698,6 +2129,9 @@ export class SpreadsheetEngine {
     // Notify plugins of theme change
     this.eventBus.emit('themeChange', { theme });
 
+    // Theme/font change affects all row heights
+    this.markAllAutoRowHeightDirty();
+
     // Trigger full re-render
     if (this.dirtyTracker) {
       this.dirtyTracker.markDirty('full');
@@ -1707,6 +2141,54 @@ export class SpreadsheetEngine {
     }
   }
 
+  /** Get the resolved locale (English defaults merged with user-provided locale). */
+  getLocale(): ResolvedLocale {
+    return this.resolvedLocale;
+  }
+
+  /**
+   * Get the CellEditorRegistry for registering custom overlay editors.
+   * Call before mount() to register editors, or after — editors registered
+   * after mount() will be available on next cell open.
+   */
+  getCellEditorRegistry(): CellEditorRegistry {
+    return this.cellEditorRegistry;
+  }
+
+  /**
+   * Convenience: register a CellEditor for a column type string.
+   * Equivalent to getCellEditorRegistry().registerForType(editor, type, priority).
+   */
+  registerCellEditor(editor: CellEditor, type: string, priority = 0): void {
+    this.cellEditorRegistry.registerForType(editor, type, priority);
+  }
+
+  /** Switch locale at runtime. Propagates to subsystems that use locale strings. */
+  setLocale(locale: SpreadsheetLocale): void {
+    this.resolvedLocale = resolveLocale(locale);
+    this.config = { ...this.config, locale };
+
+    // Propagate to subsystems
+    this.contextMenuManager?.setLocale(this.resolvedLocale);
+    this.cellEditorRegistry.setLocale(this.resolvedLocale);
+    this.filterPanel?.setLocale(this.resolvedLocale);
+    this.gridRenderer?.setLocale(this.resolvedLocale);
+    this.rowGroupManager.setLocale(this.resolvedLocale);
+    this.ariaManager?.setLocale(this.resolvedLocale);
+    this.printManager?.setLocale(this.resolvedLocale);
+    if (this.resolvedLocale.formatLocale) {
+      this.cellTypeRegistry.setFormatLocale(this.resolvedLocale.formatLocale);
+    }
+
+    // Re-render to apply any canvas-drawn locale strings
+    if (this.dirtyTracker) {
+      this.dirtyTracker.markDirty('full');
+    }
+    if (this.renderScheduler) {
+      this.renderScheduler.requestRender();
+    }
+  }
+
   // ─── Plugin API ────────────────────────────────────────────
 
   /**
@@ -1723,9 +2205,7 @@ export class SpreadsheetEngine {
     if (plugin.dependencies) {
       for (const dep of plugin.dependencies) {
         if (!this.plugins.has(dep)) {
-          throw new Error(
-            `Plugin "${plugin.name}" requires "${dep}" which is not installed`,
-          );
+          throw new Error(`Plugin "${plugin.name}" requires "${dep}" which is not installed`);
         }
       }
     }
@@ -1748,9 +2228,7 @@ export class SpreadsheetEngine {
     // Check no other plugin depends on this one
     for (const [otherName, other] of this.plugins) {
       if (otherName !== name && other.dependencies?.includes(name)) {
-        throw new Error(
-          `Cannot remove plugin "${name}": "${otherName}" depends on it`,
-        );
+        throw new Error(`Cannot remove plugin "${name}": "${otherName}" depends on it`);
       }
     }
 
@@ -1792,10 +2270,9 @@ export class SpreadsheetEngine {
     if (this.layoutEngine) {
       this.layoutEngine.setRowCount(count);
       // Propagate new Float64Array references if reallocation occurred
-      this.gridRenderer?.getGeometry().setRowData(
-        this.layoutEngine.getRowPositions(),
-        this.layoutEngine.getRowHeightsArray(),
-      );
+      this.gridRenderer
+        ?.getGeometry()
+        .setRowData(this.layoutEngine.getRowPositions(), this.layoutEngine.getRowHeightsArray());
       this.scrollManager?.updateContentSize(
         this.layoutEngine.totalWidth,
         this.layoutEngine.totalHeight,
diff --git a/packages/core/src/events/event-types.ts b/packages/core/src/events/event-types.ts
index e474e8d..db1a258 100644
--- a/packages/core/src/events/event-types.ts
+++ b/packages/core/src/events/event-types.ts
@@ -1,7 +1,14 @@
 // SPDX-License-Identifier: BUSL-1.1
 // Copyright (c) 2025 witqq contributors
 
-import type { CellValue, CellRange, Selection, ColumnDef, CellMetadata, ValidationResult } from '../types/interfaces';
+import type {
+  CellValue,
+  CellRange,
+  Selection,
+  ColumnDef,
+  CellMetadata,
+  ValidationResult,
+} from '../types/interfaces';
 import type { FillDirection } from '../autofill/autofill-manager';
 import type { SpreadsheetTheme } from '../themes/theme-types';
 
@@ -36,7 +43,15 @@ export interface ScrollEvent {
 
 // --- Internal Grid Events ---
 
-export type HitRegion = 'cell' | 'header' | 'header-sort-icon' | 'header-filter-icon' | 'row-number' | 'row-group-toggle' | 'corner' | 'outside';
+export type HitRegion =
+  | 'cell'
+  | 'header'
+  | 'header-sort-icon'
+  | 'header-filter-icon'
+  | 'row-number'
+  | 'row-group-toggle'
+  | 'corner'
+  | 'outside';
 
 export interface HitTestResult {
   /** Region of the grid that was hit. */
diff --git a/packages/core/src/filter/filter-panel.ts b/packages/core/src/filter/filter-panel.ts
index 1180633..ff1e902 100644
--- a/packages/core/src/filter/filter-panel.ts
+++ b/packages/core/src/filter/filter-panel.ts
@@ -13,6 +13,7 @@ import type { LayoutEngine } from '../renderer/layout-engine';
 import type { ScrollManager } from '../renderer/scroll-manager';
 import type { SpreadsheetTheme } from '../themes/theme-types';
 import type { FilterOperator } from './filter-engine';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
 export interface FilterPanelConfig {
   container: HTMLElement;
@@ -47,6 +48,7 @@ export class FilterPanel {
   private _currentCol = -1;
   private outsideClickHandler: ((e: MouseEvent) => void) | null = null;
   private escapeHandler: ((e: KeyboardEvent) => void) | null = null;
+  private locale: ResolvedLocale | null = null;
 
   constructor(config: FilterPanelConfig) {
     this.config = config;
@@ -65,6 +67,31 @@ export class FilterPanel {
     this.config = { ...this.config, theme };
   }
 
+  /** Update locale for runtime locale switching. */
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
+  /** Get localized operator labels. */
+  private getOperatorOptions(): { value: FilterOperator; label: string }[] {
+    const f = this.locale?.filter;
+    if (!f) return OPERATOR_OPTIONS;
+    return [
+      { value: 'equals', label: f.equals ?? 'Equals' },
+      { value: 'notEquals', label: f.notEquals ?? 'Not equals' },
+      { value: 'contains', label: f.contains ?? 'Contains' },
+      { value: 'startsWith', label: f.startsWith ?? 'Starts with' },
+      { value: 'endsWith', label: f.endsWith ?? 'Ends with' },
+      { value: 'greaterThan', label: f.greaterThan ?? 'Greater than' },
+      { value: 'lessThan', label: f.lessThan ?? 'Less than' },
+      { value: 'greaterThanOrEqual', label: f.greaterOrEqual ?? 'Greater or equal' },
+      { value: 'lessThanOrEqual', label: f.lessOrEqual ?? 'Less or equal' },
+      { value: 'between', label: f.between ?? 'Between' },
+      { value: 'isEmpty', label: f.isEmpty ?? 'Is empty' },
+      { value: 'isNotEmpty', label: f.isNotEmpty ?? 'Is not empty' },
+    ];
+  }
+
   /** Open the filter panel for a specific column. */
   open(col: number, currentOperator?: FilterOperator, currentValue?: string): void {
     if (this._isOpen) {
@@ -138,7 +165,7 @@ export class FilterPanel {
     // Operator select
     const select = document.createElement('select');
     select.className = 'wit-filter-operator';
-    for (const opt of OPERATOR_OPTIONS) {
+    for (const opt of this.getOperatorOptions()) {
       const option = document.createElement('option');
       option.value = opt.value;
       option.textContent = opt.label;
@@ -150,14 +177,14 @@ export class FilterPanel {
     const valueInput = document.createElement('input');
     valueInput.type = 'text';
     valueInput.className = 'wit-filter-value';
-    valueInput.placeholder = 'Filter value...';
+    valueInput.placeholder = this.locale?.filter?.valuePlaceholder ?? 'Filter value...';
     if (currentValue != null) valueInput.value = currentValue;
 
     // Second value input (for between)
     const valueToInput = document.createElement('input');
     valueToInput.type = 'text';
     valueToInput.className = 'wit-filter-value-to';
-    valueToInput.placeholder = 'To value...';
+    valueToInput.placeholder = this.locale?.filter?.toValuePlaceholder ?? 'To value...';
     valueToInput.style.display = 'none';
 
     // Toggle visibility based on operator
@@ -182,7 +209,7 @@ export class FilterPanel {
 
     const applyBtn = document.createElement('button');
     applyBtn.className = 'wit-filter-apply';
-    applyBtn.textContent = 'Apply';
+    applyBtn.textContent = this.locale?.filter?.apply ?? 'Apply';
     applyBtn.addEventListener('click', () => {
       const op = select.value as FilterOperator;
       const val = valueInput.value;
@@ -193,7 +220,7 @@ export class FilterPanel {
 
     const clearBtn = document.createElement('button');
     clearBtn.className = 'wit-filter-clear';
-    clearBtn.textContent = 'Clear';
+    clearBtn.textContent = this.locale?.filter?.clear ?? 'Clear';
     clearBtn.addEventListener('click', () => {
       this.config.onClear(this._currentCol);
       this.close();
diff --git a/packages/core/src/grouping/row-group-manager.ts b/packages/core/src/grouping/row-group-manager.ts
index 26640ea..1691751 100644
--- a/packages/core/src/grouping/row-group-manager.ts
+++ b/packages/core/src/grouping/row-group-manager.ts
@@ -13,6 +13,7 @@
  */
 
 import type { CellStore } from '../model/cell-store';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
 /** Aggregate function types for group headers. */
 export type AggregateFunction = 'sum' | 'count' | 'average' | 'min' | 'max' | 'none';
@@ -53,12 +54,18 @@ export class RowGroupManager {
   private childToParent: Map<number, number> = new Map();
   private aggregates: ColumnAggregate[] = [];
   private cellStore: CellStore | null = null;
+  private locale: ResolvedLocale | null = null;
 
   /** Set the CellStore reference for aggregate computation. */
   setCellStore(cellStore: CellStore): void {
     this.cellStore = cellStore;
   }
 
+  /** Set locale for aggregate labels. */
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
   /** Configure aggregate functions for columns. */
   setAggregates(aggregates: ColumnAggregate[]): void {
     this.aggregates = aggregates;
@@ -79,7 +86,7 @@ export class RowGroupManager {
         if (this.childToParent.has(child)) {
           throw new Error(
             `Row ${child} is already a child of group ${this.childToParent.get(child)}, ` +
-            `cannot also be a child of group ${def.headerRow}`,
+              `cannot also be a child of group ${def.headerRow}`,
           );
         }
       }
@@ -280,23 +287,23 @@ export class RowGroupManager {
       switch (agg.fn) {
         case 'sum':
           value = values.reduce((s, v) => s + v, 0);
-          label = `Sum: ${value}`;
+          label = `${this.locale?.grouping?.sum ?? 'Sum'}: ${value}`;
           break;
         case 'count':
           value = leafRows.length;
-          label = `Count: ${value}`;
+          label = `${this.locale?.grouping?.count ?? 'Count'}: ${value}`;
           break;
         case 'average':
           value = values.length > 0 ? values.reduce((s, v) => s + v, 0) / values.length : 0;
-          label = `Avg: ${Math.round(value * 100) / 100}`;
+          label = `${this.locale?.grouping?.avg ?? 'Avg'}: ${Math.round(value * 100) / 100}`;
           break;
         case 'min':
           value = values.length > 0 ? Math.min(...values) : 0;
-          label = `Min: ${value}`;
+          label = `${this.locale?.grouping?.min ?? 'Min'}: ${value}`;
           break;
         case 'max':
           value = values.length > 0 ? Math.max(...values) : 0;
-          label = `Max: ${value}`;
+          label = `${this.locale?.grouping?.max ?? 'Max'}: ${value}`;
           break;
       }
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index d4d9d05..dc51a0f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -12,6 +12,16 @@
 export { SpreadsheetEngine } from './engine/spreadsheet-engine';
 export type { SpreadsheetEngineConfig } from './engine/spreadsheet-engine';
 
+// Constants
+export { LINE_HEIGHT_MULTIPLIER } from './constants';
+
+// Auto Row Size
+export { AutoRowSizeManager } from './auto-row-size/auto-row-size-manager';
+export type {
+  AutoRowSizeConfig,
+  ApplyHeightsCallback,
+} from './auto-row-size/auto-row-size-manager';
+
 // Commands
 export type { Command } from './commands/command';
 export { CellEditCommand } from './commands/cell-edit-command';
@@ -97,7 +107,11 @@ export type { GridGeometryConfig } from './renderer/grid-geometry';
 export { LayoutEngine } from './renderer/layout-engine';
 export type { LayoutEngineConfig } from './renderer/layout-engine';
 export { ViewportManager } from './renderer/viewport-manager';
-export type { ViewportRange, ViewportConfig, FrozenViewportRanges } from './renderer/viewport-manager';
+export type {
+  ViewportRange,
+  ViewportConfig,
+  FrozenViewportRanges,
+} from './renderer/viewport-manager';
 export { RenderScheduler } from './renderer/render-scheduler';
 export { DirtyTracker } from './renderer/dirty-tracker';
 export type { DirtyRegion, DirtyCell, DirtyRect } from './renderer/dirty-tracker';
@@ -127,11 +141,7 @@ export type { SortChangeEvent, SortRejectedEvent } from './events/event-types';
 
 // Filter
 export { FilterEngine, evaluateCondition } from './filter/filter-engine';
-export type {
-  FilterCondition,
-  FilterOperator,
-  FilterEngineConfig,
-} from './filter/filter-engine';
+export type { FilterCondition, FilterOperator, FilterEngineConfig } from './filter/filter-engine';
 export { FilterPanel } from './filter/filter-panel';
 export type { FilterPanelConfig } from './filter/filter-panel';
 export type { FilterChangeEvent } from './events/event-types';
@@ -159,6 +169,19 @@ export { RowGroupToggleLayer } from './renderer/layers/row-group-toggle-layer';
 // Editing
 export { InlineEditor } from './editing/inline-editor';
 export type { InlineEditorConfig, EditorCloseReason } from './editing/inline-editor';
+export { DatePickerOverlay } from './editing/date-picker-overlay';
+export type { DatePickerConfig } from './editing/date-picker-overlay';
+export { DatePickerEditor } from './editing/date-picker-editor';
+export { DateTimeEditor } from './editing/date-time-editor';
+export { CellEditorRegistry } from './editing/cell-editor-registry';
+export type {
+  CellEditor,
+  CellEditorContext,
+  CellEditorCommit,
+  CellEditorClose,
+  CellEditorMatcher,
+  CellEditorRegistration,
+} from './editing/cell-editor';
 
 // Selection
 export { SelectionManager } from './selection/selection-manager';
@@ -177,6 +200,8 @@ export { lightTheme, darkTheme } from './themes/built-in-themes';
 // Resize
 export { ColumnResizeManager } from './resize/column-resize-manager';
 export type { ColumnResizeManagerConfig } from './resize/column-resize-manager';
+export { ColumnStretchManager } from './resize/column-stretch-manager';
+export type { ColumnStretchConfig, StretchMode } from './resize/column-stretch-manager';
 export { RowResizeManager } from './resize/row-resize-manager';
 export type { RowResizeManagerConfig } from './resize/row-resize-manager';
 export { ResizeRowCommand } from './commands/resize-row-command';
@@ -223,7 +248,12 @@ export { MergeManager } from './merge/merge-manager';
 
 // Context Menu
 export { ContextMenuManager } from './context-menu/context-menu-manager';
-export type { ContextMenuItem, MenuContext, MenuActionContext, ContextMenuManagerConfig } from './context-menu/context-menu-manager';
+export type {
+  ContextMenuItem,
+  MenuContext,
+  MenuActionContext,
+  ContextMenuManagerConfig,
+} from './context-menu/context-menu-manager';
 export { createDefaultMenuItems } from './context-menu/default-items';
 
 // ARIA Accessibility
@@ -242,7 +272,26 @@ export { StreamingAdapter } from './streaming/streaming-adapter';
 export type { StreamingAdapterOptions } from './streaming/streaming-adapter';
 
 // Benchmark
-export { measureInitTime, FPSCounter } from './benchmark/performance-benchmark';
-export type { BenchmarkResult, FPSResult } from './benchmark/performance-benchmark';
-
-
+export {
+  measureInitTime,
+  measureMultiRun,
+  measureThroughput,
+  computeStats,
+  FPSCounter,
+  BenchmarkRunner,
+} from './benchmark/performance-benchmark';
+export type {
+  BenchmarkResult,
+  FPSResult,
+  TimingResult,
+  RunStats,
+  BenchmarkMetric,
+  BenchmarkSuiteResult,
+} from './benchmark/performance-benchmark';
+
+// Locale
+export type { SpreadsheetLocale } from './locale/locale-types';
+export type { ResolvedLocale } from './locale/resolve-locale';
+export { resolveLocale } from './locale/resolve-locale';
+export { enLocale } from './locale/en';
+export { ruLocale } from './locale/ru';
diff --git a/packages/core/src/locale/en.ts b/packages/core/src/locale/en.ts
new file mode 100644
index 0000000..0e81210
--- /dev/null
+++ b/packages/core/src/locale/en.ts
@@ -0,0 +1,98 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * English locale — the default locale for @witqq/spreadsheet.
+ *
+ * Every key has a value, making this the canonical fallback.
+ */
+
+import type { SpreadsheetLocale } from './locale-types';
+
+export const enLocale: Required<SpreadsheetLocale> = {
+  formatLocale: 'en-US',
+
+  contextMenu: {
+    cut: 'Cut',
+    copy: 'Copy',
+    paste: 'Paste',
+    sortAscending: 'Sort Ascending',
+    sortDescending: 'Sort Descending',
+    insertRowAbove: 'Insert Row Above',
+    insertRowBelow: 'Insert Row Below',
+    deleteRow: 'Delete Row',
+  },
+
+  datePicker: {
+    weekLabels: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    today: 'Today',
+    ariaLabel: 'Date picker',
+  },
+
+  dateTimePicker: {
+    hour: 'Hour',
+    minute: 'Minute',
+    now: 'Now',
+    ariaLabel: 'Date and time picker',
+  },
+
+  filter: {
+    equals: 'Equals',
+    notEquals: 'Not equals',
+    contains: 'Contains',
+    startsWith: 'Starts with',
+    endsWith: 'Ends with',
+    greaterThan: 'Greater than',
+    lessThan: 'Less than',
+    greaterOrEqual: 'Greater or equal',
+    lessOrEqual: 'Less or equal',
+    between: 'Between',
+    isEmpty: 'Is empty',
+    isNotEmpty: 'Is not empty',
+    valuePlaceholder: 'Filter value...',
+    toValuePlaceholder: 'To value...',
+    apply: 'Apply',
+    clear: 'Clear',
+  },
+
+  grouping: {
+    sum: 'Sum',
+    count: 'Count',
+    avg: 'Avg',
+    min: 'Min',
+    max: 'Max',
+  },
+
+  emptyState: {
+    noData: 'No data',
+  },
+
+  print: {
+    showingRows: 'Showing {shown} of {total} rows',
+  },
+
+  aria: {
+    cellAnnouncement: '{column}, Row {row}: {value}',
+    cellEmpty: 'empty',
+    sortCleared: 'Sort cleared',
+    sortAscending: 'ascending',
+    sortDescending: 'descending',
+    sortedBy: 'Sorted by {columns}',
+    filterCleared: 'Filter cleared, showing all rows',
+    filterActive: 'Filtered: {visible} of {total} rows visible',
+  },
+};
diff --git a/packages/core/src/locale/index.ts b/packages/core/src/locale/index.ts
new file mode 100644
index 0000000..2d609ed
--- /dev/null
+++ b/packages/core/src/locale/index.ts
@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+export type { SpreadsheetLocale } from './locale-types';
+export { enLocale } from './en';
+export { ruLocale } from './ru';
+export { resolveLocale } from './resolve-locale';
+export type { ResolvedLocale } from './resolve-locale';
diff --git a/packages/core/src/locale/locale-types.ts b/packages/core/src/locale/locale-types.ts
new file mode 100644
index 0000000..751a6b1
--- /dev/null
+++ b/packages/core/src/locale/locale-types.ts
@@ -0,0 +1,105 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * Locale type definitions for built-in UI string translations.
+ *
+ * All fields are optional — missing keys fall back to English defaults.
+ */
+
+export interface SpreadsheetLocale {
+  /** BCP 47 locale tag used for number/date formatting (e.g. 'en-US', 'ru-RU'). */
+  formatLocale?: string;
+
+  // ─── Context menu ───
+  contextMenu?: {
+    cut?: string;
+    copy?: string;
+    paste?: string;
+    sortAscending?: string;
+    sortDescending?: string;
+    insertRowAbove?: string;
+    insertRowBelow?: string;
+    deleteRow?: string;
+  };
+
+  // ─── Date picker ───
+  datePicker?: {
+    weekLabels?: [string, string, string, string, string, string, string];
+    monthNames?: [
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+    ];
+    today?: string;
+    ariaLabel?: string;
+  };
+
+  // ─── Date-time picker ───
+  dateTimePicker?: {
+    hour?: string;
+    minute?: string;
+    now?: string;
+    ariaLabel?: string;
+  };
+
+  // ─── Filter panel ───
+  filter?: {
+    equals?: string;
+    notEquals?: string;
+    contains?: string;
+    startsWith?: string;
+    endsWith?: string;
+    greaterThan?: string;
+    lessThan?: string;
+    greaterOrEqual?: string;
+    lessOrEqual?: string;
+    between?: string;
+    isEmpty?: string;
+    isNotEmpty?: string;
+    valuePlaceholder?: string;
+    toValuePlaceholder?: string;
+    apply?: string;
+    clear?: string;
+  };
+
+  // ─── Grouping aggregates ───
+  grouping?: {
+    sum?: string;
+    count?: string;
+    avg?: string;
+    min?: string;
+    max?: string;
+  };
+
+  // ─── Empty state ───
+  emptyState?: {
+    noData?: string;
+  };
+
+  // ─── Print ───
+  print?: {
+    showingRows?: string; // e.g. "Showing {shown} of {total} rows"
+  };
+
+  // ─── ARIA ───
+  aria?: {
+    cellAnnouncement?: string; // e.g. "{column}, Row {row}: {value}"
+    cellEmpty?: string;
+    sortCleared?: string;
+    sortAscending?: string;
+    sortDescending?: string;
+    sortedBy?: string; // e.g. "Sorted by {columns}"
+    filterCleared?: string;
+    filterActive?: string; // e.g. "Filtered: {visible} of {total} rows visible"
+  };
+}
diff --git a/packages/core/src/locale/resolve-locale.ts b/packages/core/src/locale/resolve-locale.ts
new file mode 100644
index 0000000..3265a49
--- /dev/null
+++ b/packages/core/src/locale/resolve-locale.ts
@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * Resolves a partial locale into a complete locale by merging with English defaults.
+ */
+
+import type { SpreadsheetLocale } from './locale-types';
+import { enLocale } from './en';
+
+export type ResolvedLocale = Required<SpreadsheetLocale>;
+
+/** Deep-merge a partial locale over the English defaults. */
+export function resolveLocale(locale?: SpreadsheetLocale): ResolvedLocale {
+  if (!locale) return enLocale;
+
+  return {
+    formatLocale: locale.formatLocale ?? enLocale.formatLocale,
+    contextMenu: { ...enLocale.contextMenu, ...locale.contextMenu },
+    datePicker: { ...enLocale.datePicker, ...locale.datePicker },
+    dateTimePicker: { ...enLocale.dateTimePicker, ...locale.dateTimePicker },
+    filter: { ...enLocale.filter, ...locale.filter },
+    grouping: { ...enLocale.grouping, ...locale.grouping },
+    emptyState: { ...enLocale.emptyState, ...locale.emptyState },
+    print: { ...enLocale.print, ...locale.print },
+    aria: { ...enLocale.aria, ...locale.aria },
+  };
+}
diff --git a/packages/core/src/locale/ru.ts b/packages/core/src/locale/ru.ts
new file mode 100644
index 0000000..088ec22
--- /dev/null
+++ b/packages/core/src/locale/ru.ts
@@ -0,0 +1,96 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * Russian locale pack for @witqq/spreadsheet.
+ */
+
+import type { SpreadsheetLocale } from './locale-types';
+
+export const ruLocale: Required<SpreadsheetLocale> = {
+  formatLocale: 'ru-RU',
+
+  contextMenu: {
+    cut: 'Вырезать',
+    copy: 'Копировать',
+    paste: 'Вставить',
+    sortAscending: 'Сортировка по возрастанию',
+    sortDescending: 'Сортировка по убыванию',
+    insertRowAbove: 'Вставить строку выше',
+    insertRowBelow: 'Вставить строку ниже',
+    deleteRow: 'Удалить строку',
+  },
+
+  datePicker: {
+    weekLabels: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
+    monthNames: [
+      'Январь',
+      'Февраль',
+      'Март',
+      'Апрель',
+      'Май',
+      'Июнь',
+      'Июль',
+      'Август',
+      'Сентябрь',
+      'Октябрь',
+      'Ноябрь',
+      'Декабрь',
+    ],
+    today: 'Сегодня',
+    ariaLabel: 'Выбор даты',
+  },
+
+  dateTimePicker: {
+    hour: 'Час',
+    minute: 'Минута',
+    now: 'Сейчас',
+    ariaLabel: 'Выбор даты и времени',
+  },
+
+  filter: {
+    equals: 'Равно',
+    notEquals: 'Не равно',
+    contains: 'Содержит',
+    startsWith: 'Начинается с',
+    endsWith: 'Заканчивается на',
+    greaterThan: 'Больше',
+    lessThan: 'Меньше',
+    greaterOrEqual: 'Больше или равно',
+    lessOrEqual: 'Меньше или равно',
+    between: 'Между',
+    isEmpty: 'Пусто',
+    isNotEmpty: 'Не пусто',
+    valuePlaceholder: 'Значение фильтра...',
+    toValuePlaceholder: 'До значения...',
+    apply: 'Применить',
+    clear: 'Очистить',
+  },
+
+  grouping: {
+    sum: 'Сумма',
+    count: 'Кол-во',
+    avg: 'Средн.',
+    min: 'Мин',
+    max: 'Макс',
+  },
+
+  emptyState: {
+    noData: 'Нет данных',
+  },
+
+  print: {
+    showingRows: 'Показано {shown} из {total} строк',
+  },
+
+  aria: {
+    cellAnnouncement: '{column}, Строка {row}: {value}',
+    cellEmpty: 'пусто',
+    sortCleared: 'Сортировка сброшена',
+    sortAscending: 'по возрастанию',
+    sortDescending: 'по убыванию',
+    sortedBy: 'Отсортировано по {columns}',
+    filterCleared: 'Фильтр сброшен, показаны все строки',
+    filterActive: 'Отфильтровано: {visible} из {total} строк видно',
+  },
+};
diff --git a/packages/core/src/merge/merge-manager.ts b/packages/core/src/merge/merge-manager.ts
index 36d91c7..c6fc48f 100644
--- a/packages/core/src/merge/merge-manager.ts
+++ b/packages/core/src/merge/merge-manager.ts
@@ -41,9 +41,7 @@ export class MergeManager {
    * Returns false if no region starts at that position.
    */
   unmerge(startRow: number, startCol: number): boolean {
-    const idx = this.regions.findIndex(
-      (r) => r.startRow === startRow && r.startCol === startCol,
-    );
+    const idx = this.regions.findIndex((r) => r.startRow === startRow && r.startCol === startCol);
     if (idx === -1) return false;
 
     const region = this.regions[idx];
@@ -102,11 +100,7 @@ export class MergeManager {
    * Validate a merge against frozen pane boundaries.
    * Returns an error message string, or null if valid.
    */
-  validateMerge(
-    region: MergedRegion,
-    frozenRows: number,
-    frozenCols: number,
-  ): string | null {
+  validateMerge(region: MergedRegion, frozenRows: number, frozenCols: number): string | null {
     const cellCount = (region.endRow - region.startRow + 1) * (region.endCol - region.startCol + 1);
     if (cellCount < 2 || region.startRow > region.endRow || region.startCol > region.endCol) {
       return 'Merge region must contain at least 2 cells';
diff --git a/packages/core/src/model/cell-store.ts b/packages/core/src/model/cell-store.ts
index 21e0860..6c47b5e 100644
--- a/packages/core/src/model/cell-store.ts
+++ b/packages/core/src/model/cell-store.ts
@@ -63,9 +63,7 @@ export class CellStore {
    * Iterate cells within the given range (inclusive bounds).
    * Yields only cells that exist in the sparse map.
    */
-  *iterateRange(
-    range: CellRange,
-  ): IterableIterator<{ row: number; col: number; data: CellData }> {
+  *iterateRange(range: CellRange): IterableIterator<{ row: number; col: number; data: CellData }> {
     for (let row = range.startRow; row <= range.endRow; row++) {
       for (let col = range.startCol; col <= range.endCol; col++) {
         const data = this.cells.get(cellKey(row, col));
@@ -99,10 +97,7 @@ export class CellStore {
     }
   }
 
-  bulkLoad(
-    rows: ReadonlyArray<Record<string, unknown>>,
-    columnKeys: ReadonlyArray<string>,
-  ): void {
+  bulkLoad(rows: ReadonlyArray<Record<string, unknown>>, columnKeys: ReadonlyArray<string>): void {
     this.bulkLoadChunk(0, rows, columnKeys);
   }
 
diff --git a/packages/core/src/model/col-store.ts b/packages/core/src/model/col-store.ts
index 9a1370d..cc26ef5 100644
--- a/packages/core/src/model/col-store.ts
+++ b/packages/core/src/model/col-store.ts
@@ -84,10 +84,7 @@ export class ColStore {
   /**
    * Iterate visible column indices in a range (inclusive).
    */
-  *visibleColumnsInRange(
-    startCol: number,
-    endCol: number,
-  ): IterableIterator<number> {
+  *visibleColumnsInRange(startCol: number, endCol: number): IterableIterator<number> {
     const end = Math.min(endCol, this._columns.length - 1);
     for (let i = Math.max(startCol, 0); i <= end; i++) {
       if (!this.hiddenCols.has(i)) {
diff --git a/packages/core/src/model/row-store.ts b/packages/core/src/model/row-store.ts
index 859ee71..1abc9be 100644
--- a/packages/core/src/model/row-store.ts
+++ b/packages/core/src/model/row-store.ts
@@ -5,9 +5,14 @@
  * Row metadata storage: height overrides and hidden rows.
  * Rows without overrides use the default height from theme.
  * Tracks version for dirty region integration.
+ *
+ * Height overrides are separated into manual (user drag-resized) and
+ * auto (computed by measurement protocol). Manual overrides always
+ * take priority over auto-measured heights.
  */
 export class RowStore {
-  private readonly heightOverrides = new Map<number, number>();
+  private readonly manualHeightOverrides = new Map<number, number>();
+  private readonly autoHeightOverrides = new Map<number, number>();
   private readonly hiddenRows = new Set<number>();
   private _version = 0;
 
@@ -16,25 +21,96 @@ export class RowStore {
   }
 
   get overrideCount(): number {
-    return this.heightOverrides.size;
+    return this.manualHeightOverrides.size + this.autoHeightOverrides.size;
+  }
+
+  get manualOverrideCount(): number {
+    return this.manualHeightOverrides.size;
+  }
+
+  get autoOverrideCount(): number {
+    return this.autoHeightOverrides.size;
   }
 
   get hiddenCount(): number {
     return this.hiddenRows.size;
   }
 
+  /**
+   * Resolve height for a row. Priority: hidden → manual → auto → default.
+   */
   getHeight(row: number, defaultHeight: number): number {
     if (this.hiddenRows.has(row)) return 0;
-    return this.heightOverrides.get(row) ?? defaultHeight;
+    const manual = this.manualHeightOverrides.get(row);
+    if (manual !== undefined) return manual;
+    return this.autoHeightOverrides.get(row) ?? defaultHeight;
   }
 
+  /**
+   * Set a manual height override (from user interaction, e.g. drag resize).
+   * Manual overrides always take priority over auto-measured heights.
+   */
   setHeight(row: number, height: number): void {
-    this.heightOverrides.set(row, height);
+    this.manualHeightOverrides.set(row, height);
+    this._version++;
+  }
+
+  /**
+   * Set an auto-measured height override (from measurement protocol).
+   * Only effective when no manual override exists for the row.
+   */
+  setAutoHeight(row: number, height: number): void {
+    this.autoHeightOverrides.set(row, height);
     this._version++;
   }
 
+  /**
+   * Set auto-measured heights in batch. Only increments version once.
+   * Returns the set of row indices that actually changed effective height.
+   */
+  setAutoHeightsBatch(updates: Map<number, number>, defaultHeight: number): Set<number> {
+    const changed = new Set<number>();
+    for (const [row, height] of updates) {
+      // Skip rows with manual overrides — manual always wins
+      if (this.manualHeightOverrides.has(row)) continue;
+      const oldEffective = this.autoHeightOverrides.get(row) ?? defaultHeight;
+      if (Math.abs(oldEffective - height) > 0.01) {
+        this.autoHeightOverrides.set(row, height);
+        changed.add(row);
+      }
+    }
+    if (changed.size > 0) this._version++;
+    return changed;
+  }
+
+  /** Check if a row has a manual height override. */
+  isManual(row: number): boolean {
+    return this.manualHeightOverrides.has(row);
+  }
+
+  /** Check if a row has an auto height override. */
+  isAuto(row: number): boolean {
+    return this.autoHeightOverrides.has(row);
+  }
+
+  /** Clear manual height override for a row. */
   clearHeight(row: number): void {
-    if (this.heightOverrides.delete(row)) {
+    if (this.manualHeightOverrides.delete(row)) {
+      this._version++;
+    }
+  }
+
+  /** Clear auto height override for a row. */
+  clearAutoHeight(row: number): void {
+    if (this.autoHeightOverrides.delete(row)) {
+      this._version++;
+    }
+  }
+
+  /** Clear all auto height overrides. */
+  clearAllAutoHeights(): void {
+    if (this.autoHeightOverrides.size > 0) {
+      this.autoHeightOverrides.clear();
       this._version++;
     }
   }
@@ -60,10 +136,7 @@ export class RowStore {
    * Iterate visible row indices in the given range (inclusive).
    * Skips hidden rows.
    */
-  *visibleRowsInRange(
-    startRow: number,
-    endRow: number,
-  ): IterableIterator<number> {
+  *visibleRowsInRange(startRow: number, endRow: number): IterableIterator<number> {
     for (let row = startRow; row <= endRow; row++) {
       if (!this.hiddenRows.has(row)) {
         yield row;
@@ -76,15 +149,21 @@ export class RowStore {
    * Used when a row is deleted to keep height/hidden state aligned.
    */
   shiftRowsUp(deletedRow: number): void {
-    // Collect entries that need shifting
-    const newHeights = new Map<number, number>();
-    for (const [row, height] of this.heightOverrides) {
+    const newManual = new Map<number, number>();
+    for (const [row, height] of this.manualHeightOverrides) {
+      if (row < deletedRow) {
+        newManual.set(row, height);
+      } else if (row > deletedRow) {
+        newManual.set(row - 1, height);
+      }
+    }
+    const newAuto = new Map<number, number>();
+    for (const [row, height] of this.autoHeightOverrides) {
       if (row < deletedRow) {
-        newHeights.set(row, height);
+        newAuto.set(row, height);
       } else if (row > deletedRow) {
-        newHeights.set(row - 1, height);
+        newAuto.set(row - 1, height);
       }
-      // row === deletedRow is dropped
     }
     const newHidden = new Set<number>();
     for (const row of this.hiddenRows) {
@@ -95,12 +174,16 @@ export class RowStore {
       }
     }
     const changed =
-      this.heightOverrides.size !== newHeights.size ||
+      this.manualHeightOverrides.size !== newManual.size ||
+      this.autoHeightOverrides.size !== newAuto.size ||
       this.hiddenRows.size !== newHidden.size ||
-      newHeights.size > 0 ||
+      newManual.size > 0 ||
+      newAuto.size > 0 ||
       newHidden.size > 0;
-    this.heightOverrides.clear();
-    for (const [k, v] of newHeights) this.heightOverrides.set(k, v);
+    this.manualHeightOverrides.clear();
+    for (const [k, v] of newManual) this.manualHeightOverrides.set(k, v);
+    this.autoHeightOverrides.clear();
+    for (const [k, v] of newAuto) this.autoHeightOverrides.set(k, v);
     this.hiddenRows.clear();
     for (const v of newHidden) this.hiddenRows.add(v);
     if (changed) this._version++;
@@ -108,8 +191,11 @@ export class RowStore {
 
   clear(): void {
     const hadData =
-      this.heightOverrides.size > 0 || this.hiddenRows.size > 0;
-    this.heightOverrides.clear();
+      this.manualHeightOverrides.size > 0 ||
+      this.autoHeightOverrides.size > 0 ||
+      this.hiddenRows.size > 0;
+    this.manualHeightOverrides.clear();
+    this.autoHeightOverrides.clear();
     this.hiddenRows.clear();
     if (hadData) this._version++;
   }
diff --git a/packages/core/src/model/style-pool.ts b/packages/core/src/model/style-pool.ts
index e3c9c20..6643f53 100644
--- a/packages/core/src/model/style-pool.ts
+++ b/packages/core/src/model/style-pool.ts
@@ -17,7 +17,6 @@ function computeStyleHash(style: CellStyle): string {
         // Border objects — sort their keys too
         const subKeys = Object.keys(value).sort();
         const subParts = subKeys
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- cross-boundary record access for style serialization
           .map((sk) => `${sk}:${(value as unknown as Record<string, unknown>)[sk]}`)
           .join(',');
         parts.push(`${key}={${subParts}}`);
diff --git a/packages/core/src/pivot/pivot-engine.ts b/packages/core/src/pivot/pivot-engine.ts
index 7fa4f04..08da850 100644
--- a/packages/core/src/pivot/pivot-engine.ts
+++ b/packages/core/src/pivot/pivot-engine.ts
@@ -12,10 +12,7 @@ export class PivotEngine {
    * and applies aggregation functions to measures.
    * Stores source row indices per output cell for drill-down.
    */
-  compute(
-    sourceData: Record<string, unknown>[],
-    config: PivotConfig,
-  ): PivotResult {
+  compute(sourceData: Record<string, unknown>[], config: PivotConfig): PivotResult {
     const { rowDimensions, columnDimensions, measures } = config;
 
     if (measures.length === 0) {
@@ -29,9 +26,10 @@ export class PivotEngine {
     for (let i = 0; i < sourceData.length; i++) {
       const row = sourceData[i];
       const rowKey = rowDimensions.map((d) => String(row[d] ?? '')).join(KEY_SEP);
-      const colKey = columnDimensions.length > 0
-        ? columnDimensions.map((d) => String(row[d] ?? '')).join(KEY_SEP)
-        : '_total';
+      const colKey =
+        columnDimensions.length > 0
+          ? columnDimensions.map((d) => String(row[d] ?? '')).join(KEY_SEP)
+          : '_total';
 
       colKeySet.add(colKey);
 
@@ -66,15 +64,11 @@ export class PivotEngine {
     }
 
     for (const colKey of colKeys) {
-      const colLabel = colKey === '_total'
-        ? ''
-        : colKey.split(KEY_SEP).join(' / ');
+      const colLabel = colKey === '_total' ? '' : colKey.split(KEY_SEP).join(' / ');
 
       for (const measure of measures) {
         const measureLabel = measure.label ?? `${measure.aggregate}(${measure.field})`;
-        const title = colLabel
-          ? `${colLabel} — ${measureLabel}`
-          : measureLabel;
+        const title = colLabel ? `${colLabel} — ${measureLabel}` : measureLabel;
 
         columns.push({
           key: `_val_${colKey}${KEY_SEP}${measure.field}${KEY_SEP}${measure.aggregate}`,
@@ -144,10 +138,7 @@ export class PivotEngine {
     return indices.map((idx) => sourceData[idx]);
   }
 
-  private aggregate(
-    rows: Record<string, unknown>[],
-    measure: PivotMeasure,
-  ): number | null {
+  private aggregate(rows: Record<string, unknown>[], measure: PivotMeasure): number | null {
     if (rows.length === 0) return null;
 
     if (measure.aggregate === 'count') {
@@ -170,9 +161,9 @@ export class PivotEngine {
       case 'average':
         return values.reduce((a, b) => a + b, 0) / values.length;
       case 'min':
-        return values.reduce((a, b) => a < b ? a : b);
+        return values.reduce((a, b) => (a < b ? a : b));
       case 'max':
-        return values.reduce((a, b) => a > b ? a : b);
+        return values.reduce((a, b) => (a > b ? a : b));
       default:
         return null;
     }
diff --git a/packages/core/src/print/print-manager.ts b/packages/core/src/print/print-manager.ts
index 6a757fc..b660045 100644
--- a/packages/core/src/print/print-manager.ts
+++ b/packages/core/src/print/print-manager.ts
@@ -6,6 +6,7 @@ import type { DataView } from '../dataview/data-view';
 import type { ColumnDef } from '../types/interfaces';
 import type { RowStore } from '../model/row-store';
 import type { SpreadsheetTheme } from '../themes/theme-types';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
 /**
  * PrintManager — generates a print-friendly HTML table and injects @media print CSS.
@@ -30,11 +31,17 @@ export class PrintManager {
   private styleElement: HTMLStyleElement | null = null;
   private printTable: HTMLTableElement | null = null;
   private afterPrintHandler: (() => void) | null = null;
+  private locale: ResolvedLocale | null = null;
 
   constructor(config: PrintManagerConfig) {
     this.config = config;
   }
 
+  /** Set locale for print labels. */
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
   /** Inject @media print CSS that hides canvas UI and shows print table. */
   attach(): void {
     this.styleElement = document.createElement('style');
@@ -151,7 +158,8 @@ export class PrintManager {
       footCell.colSpan = visibleCols.length;
       footCell.style.fontStyle = 'italic';
       footCell.style.textAlign = 'center';
-      footCell.textContent = `Showing ${rowCount.toLocaleString()} of ${totalVisibleRows.toLocaleString()} rows`;
+      const tpl = this.locale?.print?.showingRows ?? 'Showing {shown} of {total} rows';
+      footCell.textContent = tpl.replace('{shown}', rowCount.toLocaleString()).replace('{total}', totalVisibleRows.toLocaleString());
       footRow.appendChild(footCell);
       tfoot.appendChild(footRow);
       table.appendChild(tfoot);
diff --git a/packages/core/src/renderer/grid-renderer.ts b/packages/core/src/renderer/grid-renderer.ts
index aa5c880..e6d923d 100644
--- a/packages/core/src/renderer/grid-renderer.ts
+++ b/packages/core/src/renderer/grid-renderer.ts
@@ -34,6 +34,7 @@ import { SelectionOverlayLayer } from './layers/selection-overlay-layer';
 import { EmptyStateLayer } from './layers/empty-state-layer';
 import { TextMeasureCache } from './text-measure-cache';
 import { CellTypeRegistry } from '../types/cell-type-registry';
+import type { ResolvedLocale } from '../locale/resolve-locale';
 
 export interface GridRenderConfig {
   columns: ColumnDef[];
@@ -57,6 +58,7 @@ export class GridRenderer {
   private readonly rowCount: number;
   private readonly textMeasureCache: TextMeasureCache;
   private readonly headerLayer: HeaderLayer;
+  private readonly emptyStateLayer: EmptyStateLayer;
   private frozenConfig: FrozenPaneConfig | undefined;
   private gridLinesLayer: GridLinesLayer | undefined;
   private selectionOverlayLayer: SelectionOverlayLayer | undefined;
@@ -76,10 +78,16 @@ export class GridRenderer {
     this.pipeline = new RenderPipeline(this.geometry, config.theme);
     this.pipeline.addLayer(new BackgroundLayer());
     this.pipeline.addLayer(
-      new CellTextLayer(config.cellStore, config.dataView, this.textMeasureCache, config.cellTypeRegistry),
+      new CellTextLayer(
+        config.cellStore,
+        config.dataView,
+        this.textMeasureCache,
+        config.cellTypeRegistry,
+      ),
     );
     this.pipeline.addLayer(new CellStatusLayer(config.cellStore, config.dataView));
-    this.pipeline.addLayer(new EmptyStateLayer());
+    this.emptyStateLayer = new EmptyStateLayer();
+    this.pipeline.addLayer(this.emptyStateLayer);
     // GridLines renders after cell content so it's always on top of plugin fills
     if (config.showGridLines) {
       this.gridLinesLayer = new GridLinesLayer(config.dataView);
@@ -93,7 +101,10 @@ export class GridRenderer {
     }
     // Selection overlay is always the very last layer
     if (config.selectionManager) {
-      this.selectionOverlayLayer = new SelectionOverlayLayer(config.selectionManager, config.dataView);
+      this.selectionOverlayLayer = new SelectionOverlayLayer(
+        config.selectionManager,
+        config.dataView,
+      );
       this.pipeline.addLayer(this.selectionOverlayLayer);
     }
   }
@@ -140,7 +151,8 @@ export class GridRenderer {
 
   /** Get a render layer by constructor type. */
   getLayer<T extends import('./render-layer').RenderLayer>(
-    layerClass: new (...args: unknown[]) => T,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    layerClass: abstract new (...args: any[]) => T,
   ): T | undefined {
     return this.pipeline.getLayer(layerClass);
   }
@@ -181,6 +193,11 @@ export class GridRenderer {
     this.pipeline.setTheme(theme);
   }
 
+  /** Update the locale for runtime locale switching. */
+  setLocale(locale: ResolvedLocale): void {
+    this.emptyStateLayer.setLocale(locale);
+  }
+
   /** Render the grid onto the given canvas context with viewport range. */
   render(
     ctx: CanvasRenderingContext2D,
@@ -191,7 +208,16 @@ export class GridRenderer {
     scrollY: number,
     renderMode: RenderMode = 'full',
   ): void {
-    this.pipeline.render(ctx, viewport, canvasWidth, canvasHeight, scrollX, scrollY, renderMode, this.frozenConfig);
+    this.pipeline.render(
+      ctx,
+      viewport,
+      canvasWidth,
+      canvasHeight,
+      scrollX,
+      scrollY,
+      renderMode,
+      this.frozenConfig,
+    );
   }
 
   /** Partial render: only re-draw the specified dirty rectangles. */
@@ -205,6 +231,16 @@ export class GridRenderer {
     dirtyRects: DirtyRect[],
     renderMode: RenderMode = 'full',
   ): void {
-    this.pipeline.renderPartial(ctx, viewport, canvasWidth, canvasHeight, scrollX, scrollY, dirtyRects, renderMode, this.frozenConfig);
+    this.pipeline.renderPartial(
+      ctx,
+      viewport,
+      canvasWidth,
+      canvasHeight,
+      scrollX,
+      scrollY,
+      dirtyRects,
+      renderMode,
+      this.frozenConfig,
+    );
   }
 }
diff --git a/packages/core/src/renderer/layers/cell-text-layer.ts b/packages/core/src/renderer/layers/cell-text-layer.ts
index 616aaa8..c5f5984 100644
--- a/packages/core/src/renderer/layers/cell-text-layer.ts
+++ b/packages/core/src/renderer/layers/cell-text-layer.ts
@@ -6,6 +6,7 @@ import type { TextMeasureCache } from '../text-measure-cache';
 import type { CellStore } from '../../model/cell-store';
 import type { DataView } from '../../dataview/data-view';
 import { CellTypeRegistry } from '../../types/cell-type-registry';
+import { LINE_HEIGHT_MULTIPLIER } from '../../constants';
 
 export class CellTextLayer implements RenderLayer {
   private readonly cellStore: CellStore;
@@ -13,7 +14,12 @@ export class CellTextLayer implements RenderLayer {
   private readonly measureCache: TextMeasureCache;
   private readonly typeRegistry: CellTypeRegistry;
 
-  constructor(cellStore: CellStore, dataView: DataView, measureCache: TextMeasureCache, typeRegistry?: CellTypeRegistry) {
+  constructor(
+    cellStore: CellStore,
+    dataView: DataView,
+    measureCache: TextMeasureCache,
+    typeRegistry?: CellTypeRegistry,
+  ) {
     this.cellStore = cellStore;
     this.dataView = dataView;
     this.measureCache = measureCache;
@@ -24,13 +30,93 @@ export class CellTextLayer implements RenderLayer {
     this.renderFull(rc);
   }
 
+  /**
+   * Measure desired row heights for visible rows that have wrapText columns.
+   * Returns the maximum needed height per row across all wrapText columns.
+   */
+  measureHeights(rc: RenderContext): Map<number, number> {
+    const { ctx, geometry, theme, viewport } = rc;
+    const visibleCols = geometry.getVisibleColumns();
+    const colRects = geometry.computeColumnRects();
+    const padding = geometry.cellPadding;
+    const font = `${theme.fonts.cellSize}px ${theme.fonts.cell}`;
+    const result = new Map<number, number>();
+
+    // Quick check: any wrapText columns in visible range?
+    let hasWrapCols = false;
+    for (let c = viewport.startCol; c <= viewport.endCol && c < visibleCols.length; c++) {
+      if (visibleCols[c]?.wrapText) {
+        hasWrapCols = true;
+        break;
+      }
+    }
+    if (!hasWrapCols) return result;
+
+    ctx.save();
+    ctx.font = font;
+
+    for (let r = viewport.startRow; r <= viewport.endRow; r++) {
+      const physRow = this.dataView.getPhysicalRow(r);
+      let maxHeight = 0;
+
+      for (let c = viewport.startCol; c <= viewport.endCol && c < colRects.length; c++) {
+        const col = visibleCols[c];
+        if (!col?.wrapText) continue;
+
+        const cellData = this.cellStore.get(physRow, c);
+        if (!cellData || cellData.value == null) continue;
+
+        const cellType = col.type ?? cellData.type ?? this.typeRegistry.detectType(cellData.value);
+        const renderer = this.typeRegistry.get(cellType);
+
+        // Custom cell type renderers with measureHeight take priority
+        if (renderer.measureHeight) {
+          const cr = colRects[c];
+          if (!cr) continue;
+          const h = renderer.measureHeight(ctx, cellData.value, cr.width, theme);
+          if (h > maxHeight) maxHeight = h;
+          continue;
+        }
+
+        // Default: use text measure cache for wrapped text height
+        if (renderer.render) continue; // Custom-rendered cells without measureHeight — skip
+
+        const text = renderer.format(cellData.value);
+        if (text === '') continue;
+
+        const cr = colRects[c];
+        if (!cr) continue;
+        const availableWidth = cr.width - padding * 2;
+        const h = this.measureCache.measureWrappedHeight(ctx, text, font, availableWidth);
+        if (h > maxHeight) maxHeight = h;
+      }
+
+      if (maxHeight > 0) {
+        result.set(r, maxHeight);
+      }
+    }
+
+    ctx.restore();
+    return result;
+  }
+
   /**
    * Full mode: text with truncation, formatting, and proper alignment.
    * Uses CellTypeRegistry for type-aware formatting and custom rendering.
    * Handles merged cells: skips hidden cells, spans anchor cells across merged area.
    */
   private renderFull(rc: RenderContext): void {
-    const { ctx, geometry, theme, viewport, scrollX, scrollY, canvasWidth, canvasHeight, mergeManager } = rc;
+    const {
+      ctx,
+      geometry,
+      theme,
+      viewport,
+      scrollX,
+      scrollY,
+      canvasWidth,
+      canvasHeight,
+      mergeManager,
+    } = rc;
     const colRects = geometry.computeColumnRects();
     const visibleCols = geometry.getVisibleColumns();
     const headerHeight = geometry.headerHeight;
@@ -64,7 +150,11 @@ export class CellTextLayer implements RenderLayer {
               (anchorLogical < viewport.startRow || region.startCol < viewport.startCol)
             ) {
               // Anchor is off-screen — add it if not already queued
-              if (!anchorsToRender.some((a) => a.logicalRow === anchorLogical && a.col === region.startCol)) {
+              if (
+                !anchorsToRender.some(
+                  (a) => a.logicalRow === anchorLogical && a.col === region.startCol,
+                )
+              ) {
                 anchorsToRender.push({ logicalRow: anchorLogical, col: region.startCol });
               }
             }
@@ -131,6 +221,39 @@ export class CellTextLayer implements RenderLayer {
       if (text === '') continue;
 
       const availableWidth = cellWidth - padding * 2;
+
+      // Word-wrap mode: render multi-line wrapped text
+      if (col.wrapText) {
+        const lines = this.measureCache.getWrappedLines(ctx, text, font, availableWidth);
+        const emHeight = this.measureCache.measureEmHeight(ctx, font);
+        const lineHeightPx = emHeight * LINE_HEIGHT_MULTIPLIER;
+        const totalTextHeight = lines.length * lineHeightPx;
+        // Vertically center the block of lines within the cell
+        const startY = y + (cellHeight - totalTextHeight) / 2 + lineHeightPx / 2;
+
+        const align = renderer.align;
+        ctx.textAlign = align;
+
+        for (let li = 0; li < lines.length; li++) {
+          const lineY = startY + li * lineHeightPx;
+          // Skip lines outside cell bounds
+          if (lineY < y || lineY > y + cellHeight) continue;
+
+          const line = lines[li];
+          if (line === '') continue;
+
+          if (align === 'right') {
+            ctx.fillText(line, cellX + cellWidth - padding, lineY);
+          } else if (align === 'center') {
+            ctx.fillText(line, cellX + cellWidth / 2, lineY);
+          } else {
+            ctx.fillText(line, cellX + padding, lineY);
+          }
+        }
+        continue;
+      }
+
+      // Single-line mode: truncate with ellipsis
       const displayText = this.measureCache.truncateText(ctx, text, font, availableWidth);
       if (displayText === '') continue;
 
diff --git a/packages/core/src/renderer/layers/empty-state-layer.ts b/packages/core/src/renderer/layers/empty-state-layer.ts
index 757e1d6..9253757 100644
--- a/packages/core/src/renderer/layers/empty-state-layer.ts
+++ b/packages/core/src/renderer/layers/empty-state-layer.ts
@@ -2,18 +2,25 @@
 // Copyright (c) 2025 witqq contributors
 
 import type { RenderLayer, RenderContext } from '../render-layer';
+import type { ResolvedLocale } from '../../locale/resolve-locale';
 
 /**
  * Renders "No data" text when there are no visible rows (e.g., all filtered out).
  */
 export class EmptyStateLayer implements RenderLayer {
+  private locale: ResolvedLocale | null = null;
+
+  setLocale(locale: ResolvedLocale): void {
+    this.locale = locale;
+  }
+
   render(rc: RenderContext): void {
     const { ctx, geometry, theme, canvasWidth, canvasHeight, viewport } = rc;
 
     // Only show when no visible rows
     if (viewport.endRow >= viewport.startRow) return;
 
-    const text = 'No data';
+    const text = this.locale?.emptyState?.noData ?? 'No data';
     const centerX = canvasWidth / 2;
     const centerY = geometry.headerHeight + (canvasHeight - geometry.headerHeight) / 2;
 
diff --git a/packages/core/src/renderer/layers/fill-handle-layer.ts b/packages/core/src/renderer/layers/fill-handle-layer.ts
index 8e8ca79..f220e7f 100644
--- a/packages/core/src/renderer/layers/fill-handle-layer.ts
+++ b/packages/core/src/renderer/layers/fill-handle-layer.ts
@@ -36,12 +36,7 @@ export class FillHandleLayer implements RenderLayer {
     const handlePos = this.autofillManager.getHandlePosition();
     if (handlePos) {
       ctx.fillStyle = theme.colors.activeCellBorder;
-      ctx.fillRect(
-        handlePos.x - HALF,
-        handlePos.y - HALF,
-        HANDLE_SIZE,
-        HANDLE_SIZE,
-      );
+      ctx.fillRect(handlePos.x - HALF, handlePos.y - HALF, HANDLE_SIZE, HANDLE_SIZE);
       // White border for contrast
       ctx.strokeStyle = '#ffffff';
       ctx.lineWidth = 1;
diff --git a/packages/core/src/renderer/layers/grid-lines-layer.ts b/packages/core/src/renderer/layers/grid-lines-layer.ts
index f66136a..1f0e4ec 100644
--- a/packages/core/src/renderer/layers/grid-lines-layer.ts
+++ b/packages/core/src/renderer/layers/grid-lines-layer.ts
@@ -8,7 +8,17 @@ export class GridLinesLayer implements RenderLayer {
   constructor(private readonly dataView?: DataView) {}
 
   render(rc: RenderContext): void {
-    const { ctx, geometry, theme, canvasWidth, canvasHeight, viewport, scrollX, scrollY, mergeManager } = rc;
+    const {
+      ctx,
+      geometry,
+      theme,
+      canvasWidth,
+      canvasHeight,
+      viewport,
+      scrollX,
+      scrollY,
+      mergeManager,
+    } = rc;
     const colRects = geometry.computeColumnRects();
 
     ctx.strokeStyle = theme.colors.gridLine;
@@ -17,13 +27,19 @@ export class GridLinesLayer implements RenderLayer {
 
     // Collect merged regions for grid line suppression, translating physical→logical rows
     const rawRegions = mergeManager?.getAllRegions() ?? [];
-    const regions: Array<{ startRow: number; startCol: number; endRow: number; endCol: number }> = [];
+    const regions: Array<{ startRow: number; startCol: number; endRow: number; endCol: number }> =
+      [];
     if (this.dataView && !this.dataView.isPassthrough()) {
       for (const r of rawRegions) {
         const logStart = this.dataView.getLogicalRow(r.startRow);
         const logEnd = this.dataView.getLogicalRow(r.endRow);
         if (logStart !== undefined && logEnd !== undefined) {
-          regions.push({ startRow: logStart, startCol: r.startCol, endRow: logEnd, endCol: r.endCol });
+          regions.push({
+            startRow: logStart,
+            startCol: r.startCol,
+            endRow: logEnd,
+            endCol: r.endCol,
+          });
         }
       }
     } else {
@@ -49,7 +65,17 @@ export class GridLinesLayer implements RenderLayer {
       for (let r = viewport.startRow; r <= viewport.endRow + 1; r++) {
         const y = geometry.headerHeight + geometry.getRowY(r) - scrollY;
         // Draw line in segments, skipping merged region interiors
-        this.drawHLineWithMergeGaps(ctx, y, r, colRects, regions, scrollX, canvasWidth, viewport.startCol, viewport.endCol);
+        this.drawHLineWithMergeGaps(
+          ctx,
+          y,
+          r,
+          colRects,
+          regions,
+          scrollX,
+          canvasWidth,
+          viewport.startCol,
+          viewport.endCol,
+        );
       }
     }
 
@@ -141,7 +167,11 @@ export class GridLinesLayer implements RenderLayer {
     ctx: CanvasRenderingContext2D,
     x: number,
     c: number,
-    geometry: { headerHeight: number; getRowY: (r: number) => number; getRowHeight: (r: number) => number },
+    geometry: {
+      headerHeight: number;
+      getRowY: (r: number) => number;
+      getRowHeight: (r: number) => number;
+    },
     regions: ReadonlyArray<{ startRow: number; startCol: number; endRow: number; endCol: number }>,
     scrollY: number,
     canvasHeight: number,
@@ -170,7 +200,8 @@ export class GridLinesLayer implements RenderLayer {
 
     for (const gap of gaps) {
       const gapTopY = headerH + geometry.getRowY(gap.startRow) - scrollY;
-      const gapBottomY = headerH + geometry.getRowY(gap.endRow) + geometry.getRowHeight(gap.endRow) - scrollY;
+      const gapBottomY =
+        headerH + geometry.getRowY(gap.endRow) + geometry.getRowHeight(gap.endRow) - scrollY;
 
       if (currentY < gapTopY) {
         ctx.moveTo(x + 0.5, currentY);
diff --git a/packages/core/src/renderer/layers/header-layer.ts b/packages/core/src/renderer/layers/header-layer.ts
index 8c580f9..17139d5 100644
--- a/packages/core/src/renderer/layers/header-layer.ts
+++ b/packages/core/src/renderer/layers/header-layer.ts
@@ -80,7 +80,7 @@ export class HeaderLayer implements RenderLayer {
       // Icon zone layout: rightmost 28px of cell
       // [... title ...][filter 14px][sort 14px]
       const iconZoneRight = cr.x + cr.width - padding - scrollX;
-      const sortCenterX = iconZoneRight - 7;   // center of right 14px
+      const sortCenterX = iconZoneRight - 7; // center of right 14px
       const filterCenterX = iconZoneRight - 21; // center of left 14px
       const centerY = headerHeight / 2;
 
diff --git a/packages/core/src/renderer/layers/selection-overlay-layer.ts b/packages/core/src/renderer/layers/selection-overlay-layer.ts
index 0a4628f..5171b8d 100644
--- a/packages/core/src/renderer/layers/selection-overlay-layer.ts
+++ b/packages/core/src/renderer/layers/selection-overlay-layer.ts
@@ -26,7 +26,17 @@ export class SelectionOverlayLayer implements RenderLayer {
   }
 
   render(rc: RenderContext): void {
-    const { ctx, geometry, theme, viewport, scrollX, scrollY, canvasWidth, canvasHeight, mergeManager } = rc;
+    const {
+      ctx,
+      geometry,
+      theme,
+      viewport,
+      scrollX,
+      scrollY,
+      canvasWidth,
+      canvasHeight,
+      mergeManager,
+    } = rc;
     const selection = this.selectionManager.getSelection();
 
     if (selection.ranges.length === 0) return;
@@ -71,16 +81,15 @@ export class SelectionOverlayLayer implements RenderLayer {
       const bx1 = colRects[fullStartCol].x - scrollX;
       const bx2 = colRects[fullEndCol].x + colRects[fullEndCol].width - scrollX;
       const by1 = headerHeight + geometry.getRowY(range.startRow) - scrollY;
-      const by2 = headerHeight + geometry.getRowY(range.endRow) + geometry.getRowHeight(range.endRow) - scrollY;
+      const by2 =
+        headerHeight +
+        geometry.getRowY(range.endRow) +
+        geometry.getRowHeight(range.endRow) -
+        scrollY;
 
       ctx.strokeStyle = theme.colors.selectionBorder;
       ctx.lineWidth = theme.borders.selectionWidth;
-      ctx.strokeRect(
-        bx1 + 0.5,
-        by1 + 0.5,
-        bx2 - bx1 - 1,
-        by2 - by1 - 1,
-      );
+      ctx.strokeRect(bx1 + 0.5, by1 + 0.5, bx2 - bx1 - 1, by2 - by1 - 1);
     }
 
     // Draw active cell border — wraps full merged region if merged
@@ -106,9 +115,12 @@ export class SelectionOverlayLayer implements RenderLayer {
     }
 
     if (
-      acEndRow >= viewport.startRow && acStartRow <= viewport.endRow &&
-      acEndCol >= viewport.startCol && acStartCol <= viewport.endCol &&
-      acStartCol < colRects.length && acEndCol < colRects.length
+      acEndRow >= viewport.startRow &&
+      acStartRow <= viewport.endRow &&
+      acEndCol >= viewport.startCol &&
+      acStartCol <= viewport.endCol &&
+      acStartCol < colRects.length &&
+      acEndCol < colRects.length
     ) {
       const acX = colRects[acStartCol].x - scrollX;
       const acY = headerHeight + geometry.getRowY(acStartRow) - scrollY;
@@ -124,12 +136,7 @@ export class SelectionOverlayLayer implements RenderLayer {
 
       ctx.strokeStyle = theme.colors.activeCellBorder;
       ctx.lineWidth = theme.borders.activeCellWidth;
-      ctx.strokeRect(
-        acX + 0.5,
-        acY + 0.5,
-        acW - 1,
-        acH - 1,
-      );
+      ctx.strokeRect(acX + 0.5, acY + 0.5, acW - 1, acH - 1);
     }
 
     ctx.restore();
diff --git a/packages/core/src/renderer/layout-engine.ts b/packages/core/src/renderer/layout-engine.ts
index ba3218e..5ab774f 100644
--- a/packages/core/src/renderer/layout-engine.ts
+++ b/packages/core/src/renderer/layout-engine.ts
@@ -282,6 +282,33 @@ export class LayoutEngine {
     this._contentHeight = yy;
   }
 
+  /**
+   * Batch-update multiple row heights with a single cumulative position recompute.
+   * O(n) where n = total row count (recomputes from the smallest changed index).
+   * Much more efficient than calling setRowHeight() per row.
+   */
+  setRowHeightsBatch(updates: Map<number, number>): void {
+    if (updates.size === 0) return;
+
+    let minChanged = this._rowCount;
+    for (const [rowIndex, height] of updates) {
+      if (rowIndex < 0 || rowIndex >= this._rowCount) continue;
+      this.rowHeights[rowIndex] = height;
+      if (rowIndex < minChanged) minChanged = rowIndex;
+    }
+
+    if (minChanged >= this._rowCount) return;
+
+    // Single recompute from the earliest changed row
+    let yy = this.rowPositions[minChanged];
+    for (let r = minChanged; r < this._rowCount; r++) {
+      this.rowPositions[r] = yy;
+      yy += this.rowHeights[r];
+    }
+    this.rowPositions[this._rowCount] = yy;
+    this._contentHeight = yy;
+  }
+
   /**
    * Update the width of a single column and recompute cumulative positions.
    * O(n) where n = number of columns after the changed column.
@@ -300,6 +327,32 @@ export class LayoutEngine {
     this._contentWidth = x;
   }
 
+  /**
+   * Batch update multiple column widths in a single pass.
+   * Only recomputes cumulative positions once from the lowest changed index.
+   */
+  setColumnWidthsBatch(updates: Map<number, number>): void {
+    if (updates.size === 0) return;
+
+    let minIndex = this.colWidths.length;
+    for (const [colIndex, width] of updates) {
+      if (colIndex < 0 || colIndex >= this.colWidths.length) continue;
+      this.colWidths[colIndex] = width;
+      if (colIndex < minIndex) minIndex = colIndex;
+    }
+
+    if (minIndex >= this.colWidths.length) return;
+
+    // Single recomputation from the lowest changed index
+    let x = this.colPositions[minIndex];
+    for (let i = minIndex; i < this.colWidths.length; i++) {
+      this.colPositions[i] = x;
+      x += this.colWidths[i];
+    }
+    this.colPositions[this.colWidths.length] = x;
+    this._contentWidth = x;
+  }
+
   /**
    * Get the total pixel height of the first `count` frozen rows.
    * Returns 0 if count <= 0 or exceeds row count.
diff --git a/packages/core/src/renderer/render-layer.ts b/packages/core/src/renderer/render-layer.ts
index 2ec7abc..3b5fd5f 100644
--- a/packages/core/src/renderer/render-layer.ts
+++ b/packages/core/src/renderer/render-layer.ts
@@ -39,4 +39,11 @@ export interface RenderContext {
 
 export interface RenderLayer {
   render(rc: RenderContext): void;
+  /**
+   * Optional bulk row height measurement.
+   * Returns a map of row index → desired height for visible rows.
+   * Used by the auto row size manager to collect height requirements
+   * from all render layers.
+   */
+  measureHeights?(rc: RenderContext): Map<number, number>;
 }
diff --git a/packages/core/src/renderer/render-pipeline.ts b/packages/core/src/renderer/render-pipeline.ts
index b4c260f..5366403 100644
--- a/packages/core/src/renderer/render-pipeline.ts
+++ b/packages/core/src/renderer/render-pipeline.ts
@@ -70,7 +70,8 @@ export class RenderPipeline {
     }
   }
 
-  getLayer<T extends RenderLayer>(layerClass: new (...args: unknown[]) => T): T | undefined {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getLayer<T extends RenderLayer>(layerClass: abstract new (...args: any[]) => T): T | undefined {
     const entry = this.layers.find((l) => l instanceof layerClass);
     return entry as T | undefined;
   }
@@ -111,8 +112,8 @@ export class RenderPipeline {
   ): void {
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 
-    const hasFrozen = frozenConfig &&
-      (frozenConfig.frozenRows > 0 || frozenConfig.frozenColumns > 0);
+    const hasFrozen =
+      frozenConfig && (frozenConfig.frozenRows > 0 || frozenConfig.frozenColumns > 0);
 
     if (!hasFrozen) {
       for (const layer of this.layers) {
@@ -237,7 +238,7 @@ export class RenderPipeline {
     }
 
     // Save caches for rendered regions and restore cached regions that were skipped
-    const dpr = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
+    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 
     // Corner region caching
     if (frozenRows > 0 && frozenColumns > 0) {
@@ -252,7 +253,14 @@ export class RenderPipeline {
     if (frozenRows > 0) {
       const frRowW = canvasWidth - rnWidth - frW;
       if ((scrollXChanged || !this.frozenRowCache) && frRowW > 0 && frH > 0) {
-        this.frozenRowCache = this.captureRegion(ctx, rnWidth + frW, headerHeight, frRowW, frH, dpr);
+        this.frozenRowCache = this.captureRegion(
+          ctx,
+          rnWidth + frW,
+          headerHeight,
+          frRowW,
+          frH,
+          dpr,
+        );
       } else if (this.frozenRowCache) {
         this.restoreRegion(ctx, this.frozenRowCache, rnWidth + frW, headerHeight, dpr);
       }
@@ -262,7 +270,14 @@ export class RenderPipeline {
     if (frozenColumns > 0) {
       const frColH = canvasHeight - headerHeight - frH;
       if ((scrollYChanged || !this.frozenColCache) && frW > 0 && frColH > 0) {
-        this.frozenColCache = this.captureRegion(ctx, rnWidth, headerHeight + frH, frW, frColH, dpr);
+        this.frozenColCache = this.captureRegion(
+          ctx,
+          rnWidth,
+          headerHeight + frH,
+          frW,
+          frColH,
+          dpr,
+        );
       } else if (this.frozenColCache) {
         this.restoreRegion(ctx, this.frozenColCache, rnWidth, headerHeight + frH, dpr);
       }
@@ -413,7 +428,16 @@ export class RenderPipeline {
     frozenConfig?: FrozenPaneConfig,
   ): void {
     if (frozenConfig && (frozenConfig.frozenRows > 0 || frozenConfig.frozenColumns > 0)) {
-      this.render(ctx, viewport, canvasWidth, canvasHeight, scrollX, scrollY, renderMode, frozenConfig);
+      this.render(
+        ctx,
+        viewport,
+        canvasWidth,
+        canvasHeight,
+        scrollX,
+        scrollY,
+        renderMode,
+        frozenConfig,
+      );
       return;
     }
 
@@ -452,7 +476,10 @@ export class RenderPipeline {
   /** Capture a region of the canvas as ImageData for caching. */
   private captureRegion(
     ctx: CanvasRenderingContext2D,
-    x: number, y: number, w: number, h: number,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
     dpr: number,
   ): ImageData | null {
     try {
@@ -466,7 +493,8 @@ export class RenderPipeline {
   private restoreRegion(
     ctx: CanvasRenderingContext2D,
     imageData: ImageData,
-    x: number, y: number,
+    x: number,
+    y: number,
     dpr: number,
   ): void {
     ctx.putImageData(imageData, x * dpr, y * dpr);
diff --git a/packages/core/src/renderer/text-measure-cache.ts b/packages/core/src/renderer/text-measure-cache.ts
index 948583a..f538d64 100644
--- a/packages/core/src/renderer/text-measure-cache.ts
+++ b/packages/core/src/renderer/text-measure-cache.ts
@@ -9,8 +9,12 @@
  * the oldest half is evicted (Map iteration order = insertion order).
  */
 
+import { LINE_HEIGHT_MULTIPLIER } from '../constants';
+
 export class TextMeasureCache {
   private readonly cache = new Map<string, number>();
+  private readonly wrapCache = new Map<string, string[]>();
+  private readonly emHeightCache = new Map<string, number>();
   private readonly maxSize: number;
 
   constructor(maxSize: number = 10_000) {
@@ -43,6 +47,157 @@ export class TextMeasureCache {
     return width;
   }
 
+  /**
+   * Measure the em-height of a font (approximation of line height).
+   * Uses actualBoundingBoxAscent + actualBoundingBoxDescent when available,
+   * falls back to measuring 'M' width as rough em-height.
+   */
+  measureEmHeight(ctx: CanvasRenderingContext2D, font: string): number {
+    const cached = this.emHeightCache.get(font);
+    if (cached !== undefined) return cached;
+
+    ctx.font = font;
+    const metrics = ctx.measureText('Mg');
+    let height: number;
+
+    if (
+      typeof metrics.actualBoundingBoxAscent === 'number' &&
+      typeof metrics.actualBoundingBoxDescent === 'number'
+    ) {
+      height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+    } else {
+      // Fallback: parse font size from font string
+      const match = font.match(/(\d+(?:\.\d+)?)\s*px/);
+      height = match ? parseFloat(match[1]) : 16;
+    }
+
+    this.emHeightCache.set(font, height);
+    return height;
+  }
+
+  /**
+   * Split text into wrapped lines for a given maxWidth.
+   * Uses word-boundary splitting with character-level fallback for long words.
+   * This is the single source of truth for line splitting — used by both
+   * measurement and rendering to maintain the measure-render duality invariant.
+   */
+  getWrappedLines(
+    ctx: CanvasRenderingContext2D,
+    text: string,
+    font: string,
+    maxWidth: number,
+  ): string[] {
+    if (!text || maxWidth <= 0) return [''];
+
+    const wrapKey = `${font}\0${text}\0${maxWidth}`;
+    const cached = this.wrapCache.get(wrapKey);
+    if (cached !== undefined) return cached;
+
+    const lines: string[] = [];
+    // Split on explicit newlines first
+    const paragraphs = text.split('\n');
+
+    for (const paragraph of paragraphs) {
+      if (paragraph === '') {
+        lines.push('');
+        continue;
+      }
+
+      const words = paragraph.split(/(\s+)/); // keep whitespace tokens
+      let currentLine = '';
+
+      for (const token of words) {
+        if (token === '') continue;
+
+        const testLine = currentLine + token;
+        const testWidth = this.measureText(ctx, testLine, font);
+
+        if (testWidth <= maxWidth || currentLine === '') {
+          // Fits, or first token on line (must accept it)
+          if (currentLine === '' && testWidth > maxWidth) {
+            // Single token wider than maxWidth — character-level fallback
+            const charLines = this.splitByCharacters(ctx, token, font, maxWidth);
+            for (let i = 0; i < charLines.length; i++) {
+              if (i < charLines.length - 1) {
+                lines.push(charLines[i]);
+              } else {
+                currentLine = charLines[i];
+              }
+            }
+          } else {
+            currentLine = testLine;
+          }
+        } else {
+          // Doesn't fit — wrap to next line
+          lines.push(currentLine);
+          // If the new token itself is wider than maxWidth, split it
+          const tokenWidth = this.measureText(ctx, token.trimStart(), font);
+          if (tokenWidth > maxWidth) {
+            const charLines = this.splitByCharacters(ctx, token.trimStart(), font, maxWidth);
+            for (let i = 0; i < charLines.length; i++) {
+              if (i < charLines.length - 1) {
+                lines.push(charLines[i]);
+              } else {
+                currentLine = charLines[i];
+              }
+            }
+          } else {
+            currentLine = token.trimStart();
+          }
+        }
+      }
+
+      lines.push(currentLine);
+    }
+
+    // Evict oldest entries from wrap cache
+    if (this.wrapCache.size >= this.maxSize) {
+      const evictCount = Math.max(1, this.maxSize >> 1);
+      let count = 0;
+      for (const key of this.wrapCache.keys()) {
+        if (count >= evictCount) break;
+        this.wrapCache.delete(key);
+        count++;
+      }
+    }
+
+    this.wrapCache.set(wrapKey, lines);
+    return lines;
+  }
+
+  /**
+   * Count how many wrapped lines text would produce at a given maxWidth.
+   */
+  countWrappedLines(
+    ctx: CanvasRenderingContext2D,
+    text: string,
+    font: string,
+    maxWidth: number,
+  ): number {
+    return this.getWrappedLines(ctx, text, font, maxWidth).length;
+  }
+
+  /**
+   * Compute total pixel height for wrapped text including padding.
+   * lineHeight is expressed as a multiplier of em-height (e.g. 1.2).
+   */
+  measureWrappedHeight(
+    ctx: CanvasRenderingContext2D,
+    text: string,
+    font: string,
+    maxWidth: number,
+    lineHeight: number = LINE_HEIGHT_MULTIPLIER,
+    padding?: { top: number; bottom: number },
+  ): number {
+    const lineCount = this.countWrappedLines(ctx, text, font, maxWidth);
+    const emHeight = this.measureEmHeight(ctx, font);
+    const lineHeightPx = emHeight * lineHeight;
+    const textHeight = lineCount * lineHeightPx;
+    const paddingTop = padding?.top ?? 0;
+    const paddingBottom = padding?.bottom ?? 0;
+    return textHeight + paddingTop + paddingBottom;
+  }
+
   /**
    * Truncate text to fit within maxWidth, appending ellipsis if needed.
    * Returns the original text if it fits, or truncated text + "…".
@@ -85,6 +240,8 @@ export class TextMeasureCache {
 
   clear(): void {
     this.cache.clear();
+    this.wrapCache.clear();
+    this.emHeightCache.clear();
   }
 
   get size(): number {
@@ -101,4 +258,26 @@ export class TextMeasureCache {
       count++;
     }
   }
+
+  /** Split a long word into lines by characters when it exceeds maxWidth. */
+  private splitByCharacters(
+    ctx: CanvasRenderingContext2D,
+    word: string,
+    font: string,
+    maxWidth: number,
+  ): string[] {
+    const result: string[] = [];
+    let current = '';
+    for (const char of word) {
+      const test = current + char;
+      if (this.measureText(ctx, test, font) > maxWidth && current !== '') {
+        result.push(current);
+        current = char;
+      } else {
+        current = test;
+      }
+    }
+    if (current) result.push(current);
+    return result.length > 0 ? result : [''];
+  }
 }
diff --git a/packages/core/src/renderer/viewport-manager.ts b/packages/core/src/renderer/viewport-manager.ts
index fc4136b..591c82d 100644
--- a/packages/core/src/renderer/viewport-manager.ts
+++ b/packages/core/src/renderer/viewport-manager.ts
@@ -82,7 +82,10 @@ export class ViewportManager {
           Math.min(scrollX + viewportWidth - 1, this.layout.totalWidth - 1),
         );
         const startCol = Math.max(0, firstVisibleCol - this.colBuffer);
-        const endCol = Math.min(colCount - 1, (lastVisibleCol >= 0 ? lastVisibleCol : 0) + this.colBuffer);
+        const endCol = Math.min(
+          colCount - 1,
+          (lastVisibleCol >= 0 ? lastVisibleCol : 0) + this.colBuffer,
+        );
         return {
           startRow: 0,
           endRow: -1,
@@ -109,10 +112,7 @@ export class ViewportManager {
       Math.min(scrollY + viewportHeight - 1, this.layout.contentHeight - 1),
     );
 
-    const startRow = Math.max(
-      0,
-      (firstVisibleRow === -1 ? 0 : firstVisibleRow) - this.rowBuffer,
-    );
+    const startRow = Math.max(0, (firstVisibleRow === -1 ? 0 : firstVisibleRow) - this.rowBuffer);
     const endRow = Math.min(
       rowCount - 1,
       (lastVisibleRow === -1 ? rowCount - 1 : lastVisibleRow) + this.rowBuffer,
@@ -124,10 +124,7 @@ export class ViewportManager {
       Math.min(scrollX + viewportWidth - 1, this.layout.contentWidth - 1),
     );
 
-    const startCol = Math.max(
-      0,
-      (firstVisibleCol === -1 ? 0 : firstVisibleCol) - this.colBuffer,
-    );
+    const startCol = Math.max(0, (firstVisibleCol === -1 ? 0 : firstVisibleCol) - this.colBuffer);
     const endCol = Math.min(
       colCount - 1,
       (lastVisibleCol === -1 ? colCount - 1 : lastVisibleCol) + this.colBuffer,
@@ -184,7 +181,10 @@ export class ViewportManager {
       startCol: Math.max(fc, frozenRowRange.startCol),
       endCol: frozenRowRange.endCol,
       visibleRowCount: fr,
-      visibleColCount: Math.max(0, frozenRowRange.endCol - Math.max(fc, frozenRowRange.startCol) + 1),
+      visibleColCount: Math.max(
+        0,
+        frozenRowRange.endCol - Math.max(fc, frozenRowRange.startCol) + 1,
+      ),
     };
 
     // Frozen-col strip: scrolling rows × frozen cols
@@ -194,7 +194,10 @@ export class ViewportManager {
       endRow: frozenColRange.endRow,
       startCol: 0,
       endCol: fc > 0 ? fc - 1 : -1,
-      visibleRowCount: Math.max(0, frozenColRange.endRow - Math.max(fr, frozenColRange.startRow) + 1),
+      visibleRowCount: Math.max(
+        0,
+        frozenColRange.endRow - Math.max(fr, frozenColRange.startRow) + 1,
+      ),
       visibleColCount: fc,
     };
 
diff --git a/packages/core/src/resize/column-stretch-manager.ts b/packages/core/src/resize/column-stretch-manager.ts
new file mode 100644
index 0000000..2bdeca0
--- /dev/null
+++ b/packages/core/src/resize/column-stretch-manager.ts
@@ -0,0 +1,181 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+/**
+ * ColumnStretchManager — distributes available container width across columns.
+ *
+ * Two stretch modes:
+ *   'all'  — distribute extra space evenly among all stretchable columns
+ *   'last' — give all remaining space to the last visible column
+ *
+ * Stretch is recalculated:
+ *   - On container resize (ResizeObserver callback from engine)
+ *   - On manual column resize (adjusts remaining stretch distribution)
+ *   - On column visibility changes
+ *
+ * Frozen columns and manually resized columns are accounted for:
+ *   their widths are subtracted from available space before distribution.
+ */
+
+import type { ColumnDef } from '../types/interfaces';
+
+export type StretchMode = 'all' | 'last';
+
+export interface ColumnStretchConfig {
+  /** Stretch mode: 'all' distributes evenly, 'last' gives remaining to last column. */
+  mode: StretchMode;
+}
+
+export interface StretchApplyCallback {
+  (updates: Map<number, number>): void;
+}
+
+export class ColumnStretchManager {
+  private readonly mode: StretchMode;
+  private readonly applyWidths: StretchApplyCallback;
+
+  /** Track columns that were manually resized (by visible index). */
+  private readonly manuallyResized = new Set<number>();
+
+  private destroyed = false;
+
+  constructor(config: ColumnStretchConfig, applyWidths: StretchApplyCallback) {
+    this.mode = config.mode;
+    this.applyWidths = applyWidths;
+  }
+
+  /**
+   * Mark a column as manually resized. Its current width is preserved
+   * and excluded from stretch calculations.
+   */
+  markManualResize(visibleColIndex: number): void {
+    this.manuallyResized.add(visibleColIndex);
+  }
+
+  /** Clear all manual resize marks (e.g. on column reorder). */
+  clearManualResizes(): void {
+    this.manuallyResized.clear();
+  }
+
+  /**
+   * Calculate and apply stretched column widths.
+   *
+   * @param columns Full column definitions array
+   * @param containerWidth Available container width in pixels (content area, excludes row number column)
+   * @param frozenColumns Number of frozen columns (their widths are fixed, not stretched)
+   * @param currentWidths Current visible column widths (from LayoutEngine)
+   * @returns Map of visible column index → new width, or null if no changes needed
+   */
+  calculate(
+    columns: ColumnDef[],
+    containerWidth: number,
+    frozenColumns: number,
+    currentWidths: (colIndex: number) => number,
+  ): Map<number, number> | null {
+    if (this.destroyed || containerWidth <= 0) return null;
+
+    const visibleCols = columns.reduce<number[]>((acc, col, i) => {
+      if (!col.hidden) acc.push(i);
+      return acc;
+    }, []);
+
+    if (visibleCols.length === 0) return null;
+
+    // Compute total of current column widths
+    let totalCurrentWidth = 0;
+    for (let vi = 0; vi < visibleCols.length; vi++) {
+      totalCurrentWidth += currentWidths(vi);
+    }
+
+    // If columns already fill or exceed container, no stretch needed
+    if (totalCurrentWidth >= containerWidth) return null;
+
+    const extraSpace = containerWidth - totalCurrentWidth;
+
+    if (this.mode === 'last') {
+      return this.calculateLastMode(visibleCols, currentWidths, extraSpace);
+    }
+    return this.calculateAllMode(visibleCols, columns, frozenColumns, currentWidths, extraSpace);
+  }
+
+  private calculateLastMode(
+    visibleCols: number[],
+    currentWidths: (colIndex: number) => number,
+    extraSpace: number,
+  ): Map<number, number> | null {
+    const lastVisibleIndex = visibleCols.length - 1;
+    const currentWidth = currentWidths(lastVisibleIndex);
+    const newWidth = currentWidth + extraSpace;
+
+    const updates = new Map<number, number>();
+    updates.set(lastVisibleIndex, newWidth);
+    return updates;
+  }
+
+  private calculateAllMode(
+    visibleCols: number[],
+    columns: ColumnDef[],
+    frozenColumns: number,
+    currentWidths: (colIndex: number) => number,
+    extraSpace: number,
+  ): Map<number, number> | null {
+    // Determine which columns are stretchable:
+    // - Not frozen
+    // - Not manually resized
+    const stretchable: number[] = [];
+    for (let vi = 0; vi < visibleCols.length; vi++) {
+      const colDefIndex = visibleCols[vi];
+      const col = columns[colDefIndex];
+      if (col.frozen || vi < frozenColumns || this.manuallyResized.has(vi)) {
+        continue;
+      }
+      stretchable.push(vi);
+    }
+
+    if (stretchable.length === 0) {
+      // All columns are frozen or manually resized — give remaining to last
+      return this.calculateLastMode(visibleCols, currentWidths, extraSpace);
+    }
+
+    const perColumn = extraSpace / stretchable.length;
+    const updates = new Map<number, number>();
+
+    for (const vi of stretchable) {
+      const currentWidth = currentWidths(vi);
+      const colDefIndex = visibleCols[vi];
+      const col = columns[colDefIndex];
+      const minW = col.minWidth ?? 30;
+      const newWidth = Math.max(currentWidth + perColumn, minW);
+      updates.set(vi, newWidth);
+    }
+
+    return updates;
+  }
+
+  /**
+   * Recalculate stretch and apply via callback.
+   * Convenience method that combines calculate() + applyWidths().
+   */
+  recalculate(
+    columns: ColumnDef[],
+    containerWidth: number,
+    frozenColumns: number,
+    currentWidths: (colIndex: number) => number,
+  ): void {
+    const updates = this.calculate(columns, containerWidth, frozenColumns, currentWidths);
+    if (updates && updates.size > 0) {
+      this.applyWidths(updates);
+    }
+  }
+
+  /** Whether the manager has been destroyed. */
+  get isDestroyed(): boolean {
+    return this.destroyed;
+  }
+
+  /** Clean up. */
+  destroy(): void {
+    this.manuallyResized.clear();
+    this.destroyed = true;
+  }
+}
diff --git a/packages/core/src/resize/index.ts b/packages/core/src/resize/index.ts
index 3a54b76..ab25f64 100644
--- a/packages/core/src/resize/index.ts
+++ b/packages/core/src/resize/index.ts
@@ -3,3 +3,9 @@
 
 export { ColumnResizeManager } from './column-resize-manager';
 export type { ColumnResizeManagerConfig } from './column-resize-manager';
+export { ColumnStretchManager } from './column-stretch-manager';
+export type {
+  ColumnStretchConfig,
+  StretchMode,
+  StretchApplyCallback,
+} from './column-stretch-manager';
diff --git a/packages/core/src/selection/selection-manager.ts b/packages/core/src/selection/selection-manager.ts
index f33107b..b09d871 100644
--- a/packages/core/src/selection/selection-manager.ts
+++ b/packages/core/src/selection/selection-manager.ts
@@ -78,12 +78,14 @@ export class SelectionManager {
       c = region.startCol;
       this._activeCell = { row: r, col: c };
       this._anchorCell = { row: r, col: c };
-      this._ranges = [{
-        startRow: region.startRow,
-        startCol: region.startCol,
-        endRow: region.endRow,
-        endCol: region.endCol,
-      }];
+      this._ranges = [
+        {
+          startRow: region.startRow,
+          startCol: region.startCol,
+          endRow: region.endRow,
+          endCol: region.endCol,
+        },
+      ];
     } else {
       this._activeCell = { row: r, col: c };
       this._anchorCell = { row: r, col: c };
@@ -211,12 +213,14 @@ export class SelectionManager {
 
     this._activeCell = { row: 0, col: 0 };
     this._anchorCell = { row: 0, col: 0 };
-    this._ranges = [{
-      startRow: 0,
-      startCol: 0,
-      endRow: this._rowCount - 1,
-      endCol: this._colCount - 1,
-    }];
+    this._ranges = [
+      {
+        startRow: 0,
+        startCol: 0,
+        endRow: this._rowCount - 1,
+        endCol: this._colCount - 1,
+      },
+    ];
     this._type = 'all';
 
     this.notifyChange(prev);
@@ -226,8 +230,10 @@ export class SelectionManager {
   isSelected(row: number, col: number): boolean {
     for (const range of this._ranges) {
       if (
-        row >= range.startRow && row <= range.endRow &&
-        col >= range.startCol && col <= range.endCol
+        row >= range.startRow &&
+        row <= range.endRow &&
+        col >= range.startCol &&
+        col <= range.endCol
       ) {
         return true;
       }
diff --git a/packages/core/src/streaming/streaming-adapter.ts b/packages/core/src/streaming/streaming-adapter.ts
index f36a7bc..0761a0f 100644
--- a/packages/core/src/streaming/streaming-adapter.ts
+++ b/packages/core/src/streaming/streaming-adapter.ts
@@ -174,7 +174,7 @@ export class StreamingAdapter {
       row: -1,
       col: -1,
       value: null,
-      column: { key: '_batch', title: '' },
+      column: { key: '_batch', title: '', width: 0 },
       oldValue: null,
       newValue: null,
       source: 'streaming-adapter',
diff --git a/packages/core/src/types/cell-type-registry.ts b/packages/core/src/types/cell-type-registry.ts
index ee3ad02..776bc21 100644
--- a/packages/core/src/types/cell-type-registry.ts
+++ b/packages/core/src/types/cell-type-registry.ts
@@ -37,6 +37,18 @@ export interface CellTypeRenderer {
     height: number,
     theme: SpreadsheetTheme,
   ) => void;
+  /**
+   * Optional height measurement for auto row sizing.
+   * Returns the desired row height in pixels for a given cell value,
+   * considering the available column width and theme.
+   * When not provided, the default row height is used.
+   */
+  measureHeight?: (
+    ctx: CanvasRenderingContext2D,
+    value: CellValue,
+    width: number,
+    theme: SpreadsheetTheme,
+  ) => number;
 }
 
 const stringRenderer: CellTypeRenderer = {
@@ -102,6 +114,7 @@ const dateRenderer: CellTypeRenderer = {
 
 export class CellTypeRegistry {
   private readonly renderers = new Map<CellType, CellTypeRenderer>();
+  private formatLocale: string = 'en-US';
 
   constructor() {
     // Register built-in types
@@ -121,6 +134,37 @@ export class CellTypeRegistry {
     this.renderers.set(type, renderer);
   }
 
+  /** Set the format locale for number and date renderers. */
+  setFormatLocale(locale: string): void {
+    this.formatLocale = locale;
+    const loc = locale;
+    this.renderers.set('number', {
+      format: (value) => {
+        if (value == null) return '';
+        if (typeof value === 'number') return value.toLocaleString(loc);
+        return String(value);
+      },
+      align: 'right',
+    });
+    this.renderers.set('date', {
+      format: (value) => {
+        if (value == null) return '';
+        if (value instanceof Date) return value.toLocaleDateString(loc);
+        if (typeof value === 'string') {
+          const parsed = new Date(value);
+          if (!isNaN(parsed.getTime())) return parsed.toLocaleDateString(loc);
+        }
+        return String(value);
+      },
+      align: 'left',
+    });
+  }
+
+  /** Get the current format locale. */
+  getFormatLocale(): string {
+    return this.formatLocale;
+  }
+
   /**
    * Detect cell type from a raw value when column type is not specified.
    * Returns the CellType or 'string' as fallback.
diff --git a/packages/core/src/types/interfaces.ts b/packages/core/src/types/interfaces.ts
index 3fdd0bb..6499134 100644
--- a/packages/core/src/types/interfaces.ts
+++ b/packages/core/src/types/interfaces.ts
@@ -44,6 +44,7 @@ export type CellType =
   | 'number'
   | 'boolean'
   | 'date'
+  | 'datetime'
   | 'select'
   | 'dynamicSelect'
   | 'formula'
@@ -157,6 +158,8 @@ export interface ColumnDef {
   readonly resizable?: boolean;
   /** Hide this column from display and print. */
   readonly hidden?: boolean;
+  /** Enable text wrapping for cells in this column. */
+  readonly wrapText?: boolean;
   /** Validation rules applied to all cells in this column. */
   readonly validation?: import('../validation/validation-engine').SpreadsheetValidationRule[];
 }
@@ -180,8 +183,8 @@ export interface Selection {
 export interface MergedRegion {
   readonly startRow: number;
   readonly startCol: number;
-  readonly endRow: number;   // inclusive
-  readonly endCol: number;   // inclusive
+  readonly endRow: number; // inclusive
+  readonly endCol: number; // inclusive
 }
 
 // --- Validation Types ---
diff --git a/packages/core/tests/auto-row-size-manager.test.ts b/packages/core/tests/auto-row-size-manager.test.ts
new file mode 100644
index 0000000..c450cfd
--- /dev/null
+++ b/packages/core/tests/auto-row-size-manager.test.ts
@@ -0,0 +1,329 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AutoRowSizeManager } from '../src/auto-row-size/auto-row-size-manager';
+import type { AutoRowSizeConfig } from '../src/auto-row-size/auto-row-size-manager';
+import type { RenderContext, RenderLayer } from '../src/renderer/render-layer';
+import { RowStore } from '../src/model/row-store';
+
+/** Create a minimal mock RenderContext. */
+function mockRenderContext(overrides?: Partial<RenderContext>): RenderContext {
+  return {
+    ctx: {} as CanvasRenderingContext2D,
+    geometry: {} as any,
+    theme: { fonts: { cell: 'Arial', cellSize: 13 } } as any,
+    canvasWidth: 800,
+    canvasHeight: 600,
+    viewport: { startRow: 0, endRow: 9, startCol: 0, endCol: 5, visibleRowCount: 10, visibleColCount: 6 },
+    scrollX: 0,
+    scrollY: 0,
+    renderMode: 'full',
+    paneRegion: 'full',
+    ...overrides,
+  };
+}
+
+/** Create a mock RenderLayer that returns predefined heights. */
+function createMockLayer(heightMap: Map<number, number>): RenderLayer {
+  return {
+    render: vi.fn(),
+    measureHeights: vi.fn(() => new Map(heightMap)),
+  };
+}
+
+describe('AutoRowSizeManager', () => {
+  let applyHeights: ReturnType<typeof vi.fn>;
+  let rowStore: RowStore;
+
+  beforeEach(() => {
+    applyHeights = vi.fn();
+    rowStore = new RowStore();
+  });
+
+  function createManager(config?: Partial<AutoRowSizeConfig>): AutoRowSizeManager {
+    return new AutoRowSizeManager(
+      { minRowHeight: 28, cellPadding: 8, ...config },
+      applyHeights,
+    );
+  }
+
+  describe('constructor', () => {
+    it('creates manager with default config', () => {
+      const mgr = new AutoRowSizeManager({}, applyHeights);
+      expect(mgr.isMeasuring).toBe(false);
+      expect(mgr.progress).toBe(1);
+    });
+
+    it('creates manager with custom config', () => {
+      const mgr = createManager({ batchSize: 50, minRowHeight: 20, cellPadding: 4 });
+      expect(mgr.isMeasuring).toBe(false);
+    });
+  });
+
+  describe('measureViewport', () => {
+    it('returns 0 when no layers are set', () => {
+      const mgr = createManager();
+      const rc = mockRenderContext();
+      const updated = mgr.measureViewport(rc, rowStore);
+      expect(updated).toBe(0);
+      expect(applyHeights).not.toHaveBeenCalled();
+    });
+
+    it('returns 0 when layers report no heights', () => {
+      const mgr = createManager();
+      mgr.setLayers([createMockLayer(new Map())]);
+      const rc = mockRenderContext();
+      const updated = mgr.measureViewport(rc, rowStore);
+      expect(updated).toBe(0);
+    });
+
+    it('measures visible rows and applies heights with padding', () => {
+      const mgr = createManager({ cellPadding: 8, minRowHeight: 28 });
+      const heights = new Map([[0, 50], [1, 30], [2, 100]]);
+      mgr.setLayers([createMockLayer(heights)]);
+
+      const rc = mockRenderContext();
+      const updated = mgr.measureViewport(rc, rowStore);
+
+      expect(updated).toBe(3);
+      expect(applyHeights).toHaveBeenCalledTimes(1);
+
+      const appliedMap = applyHeights.mock.calls[0][0] as Map<number, number>;
+      expect(appliedMap.get(0)).toBe(58);  // 50 + 8
+      expect(appliedMap.get(1)).toBe(38);  // 30 + 8
+      expect(appliedMap.get(2)).toBe(108); // 100 + 8
+    });
+
+    it('applies minRowHeight when measured height + padding is below minimum', () => {
+      const mgr = createManager({ cellPadding: 8, minRowHeight: 28 });
+      // Height 10 + 8 = 18, which is below minRowHeight 28
+      const heights = new Map([[0, 10]]);
+      mgr.setLayers([createMockLayer(heights)]);
+
+      const rc = mockRenderContext();
+      mgr.measureViewport(rc, rowStore);
+
+      const appliedMap = applyHeights.mock.calls[0][0] as Map<number, number>;
+      expect(appliedMap.get(0)).toBe(28); // clamped to minRowHeight
+    });
+
+    it('skips rows with manual height overrides', () => {
+      const mgr = createManager({ cellPadding: 8, minRowHeight: 28 });
+      rowStore.setHeight(1, 60); // manual override on row 1
+
+      const heights = new Map([[0, 50], [1, 80], [2, 40]]);
+      mgr.setLayers([createMockLayer(heights)]);
+
+      const rc = mockRenderContext();
+      const updated = mgr.measureViewport(rc, rowStore);
+
+      expect(updated).toBe(2); // row 1 skipped
+      const appliedMap = applyHeights.mock.calls[0][0] as Map<number, number>;
+      expect(appliedMap.has(1)).toBe(false);
+      expect(appliedMap.get(0)).toBe(58);
+      expect(appliedMap.get(2)).toBe(48);
+    });
+
+    it('takes maximum height across multiple layers', () => {
+      const mgr = createManager({ cellPadding: 0, minRowHeight: 0 });
+      const layer1 = createMockLayer(new Map([[0, 30], [1, 50]]));
+      const layer2 = createMockLayer(new Map([[0, 60], [2, 40]]));
+      mgr.setLayers([layer1, layer2]);
+
+      const rc = mockRenderContext();
+      mgr.measureViewport(rc, rowStore);
+
+      const appliedMap = applyHeights.mock.calls[0][0] as Map<number, number>;
+      expect(appliedMap.get(0)).toBe(60); // max(30, 60)
+      expect(appliedMap.get(1)).toBe(50); // only layer1
+      expect(appliedMap.get(2)).toBe(40); // only layer2
+    });
+
+    it('passes RenderContext to layer measureHeights', () => {
+      const mgr = createManager();
+      const layer = createMockLayer(new Map([[0, 40]]));
+      mgr.setLayers([layer]);
+
+      const rc = mockRenderContext({ scrollX: 100 });
+      mgr.measureViewport(rc, rowStore);
+
+      expect(layer.measureHeights).toHaveBeenCalledWith(rc);
+    });
+
+    it('returns 0 after manager is destroyed', () => {
+      const mgr = createManager();
+      mgr.setLayers([createMockLayer(new Map([[0, 50]]))]);
+      mgr.destroy();
+
+      const rc = mockRenderContext();
+      const updated = mgr.measureViewport(rc, rowStore);
+      expect(updated).toBe(0);
+      expect(applyHeights).not.toHaveBeenCalled();
+    });
+
+    it('ignores layers without measureHeights method', () => {
+      const mgr = createManager({ cellPadding: 0, minRowHeight: 0 });
+      const layerWithout: RenderLayer = { render: vi.fn() };
+      const layerWith = createMockLayer(new Map([[0, 50]]));
+      mgr.setLayers([layerWithout, layerWith]);
+
+      const rc = mockRenderContext();
+      mgr.measureViewport(rc, rowStore);
+
+      const appliedMap = applyHeights.mock.calls[0][0] as Map<number, number>;
+      expect(appliedMap.get(0)).toBe(50);
+    });
+
+    it('returns 0 when all measured rows have manual overrides', () => {
+      const mgr = createManager();
+      rowStore.setHeight(0, 60);
+      rowStore.setHeight(1, 60);
+      mgr.setLayers([createMockLayer(new Map([[0, 50], [1, 50]]))]);
+
+      const rc = mockRenderContext();
+      const updated = mgr.measureViewport(rc, rowStore);
+      expect(updated).toBe(0);
+      expect(applyHeights).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('async measurement', () => {
+    it('reports not measuring when idle', () => {
+      const mgr = createManager();
+      expect(mgr.isMeasuring).toBe(false);
+      expect(mgr.progress).toBe(1);
+    });
+
+    it('cancelAsyncMeasurement is safe when not measuring', () => {
+      const mgr = createManager();
+      expect(() => mgr.cancelAsyncMeasurement()).not.toThrow();
+    });
+
+    it('does not start async measurement after destroy', () => {
+      const mgr = createManager();
+      mgr.destroy();
+      const buildRc = vi.fn();
+      mgr.startAsyncMeasurement(100, buildRc, rowStore);
+      expect(mgr.isMeasuring).toBe(false);
+      expect(buildRc).not.toHaveBeenCalled();
+    });
+
+    it('does not start for 0 rows', () => {
+      const mgr = createManager();
+      const buildRc = vi.fn();
+      mgr.startAsyncMeasurement(0, buildRc, rowStore);
+      expect(mgr.isMeasuring).toBe(false);
+    });
+  });
+
+  describe('setLayers', () => {
+    it('replaces layers', () => {
+      const mgr = createManager({ cellPadding: 0, minRowHeight: 0 });
+      const layer1 = createMockLayer(new Map([[0, 30]]));
+      const layer2 = createMockLayer(new Map([[0, 60]]));
+
+      mgr.setLayers([layer1]);
+      const rc = mockRenderContext();
+      mgr.measureViewport(rc, rowStore);
+      expect((applyHeights.mock.calls[0][0] as Map<number, number>).get(0)).toBe(30);
+
+      mgr.setLayers([layer2]);
+      mgr.measureViewport(rc, rowStore);
+      expect((applyHeights.mock.calls[1][0] as Map<number, number>).get(0)).toBe(60);
+    });
+  });
+
+  describe('destroy', () => {
+    it('clears layers and prevents future measurements', () => {
+      const mgr = createManager();
+      mgr.setLayers([createMockLayer(new Map([[0, 50]]))]);
+      mgr.destroy();
+
+      const rc = mockRenderContext();
+      expect(mgr.measureViewport(rc, rowStore)).toBe(0);
+    });
+
+    it('clears dirty rows on destroy', () => {
+      const mgr = createManager();
+      mgr.markDirtyRows([0, 1, 2]);
+      expect(mgr.hasDirtyRows).toBe(true);
+      mgr.destroy();
+      expect(mgr.hasDirtyRows).toBe(false);
+    });
+  });
+
+  describe('dirty tracking', () => {
+    it('marks specific rows as dirty', () => {
+      const mgr = createManager();
+      expect(mgr.hasDirtyRows).toBe(false);
+      expect(mgr.dirtyRowCount).toBe(0);
+
+      mgr.markDirtyRows([0, 5, 10]);
+      expect(mgr.hasDirtyRows).toBe(true);
+      expect(mgr.dirtyRowCount).toBe(3);
+      expect(mgr.isRowDirty(0)).toBe(true);
+      expect(mgr.isRowDirty(5)).toBe(true);
+      expect(mgr.isRowDirty(10)).toBe(true);
+      expect(mgr.isRowDirty(3)).toBe(false);
+    });
+
+    it('marks all rows as dirty', () => {
+      const mgr = createManager();
+      mgr.markAllDirty();
+      expect(mgr.hasDirtyRows).toBe(true);
+      expect(mgr.isAllDirty).toBe(true);
+      expect(mgr.isRowDirty(999)).toBe(true); // any row is dirty
+    });
+
+    it('clears dirty state', () => {
+      const mgr = createManager();
+      mgr.markDirtyRows([1, 2, 3]);
+      mgr.markAllDirty();
+      mgr.clearDirty();
+      expect(mgr.hasDirtyRows).toBe(false);
+      expect(mgr.isAllDirty).toBe(false);
+      expect(mgr.dirtyRowCount).toBe(0);
+    });
+
+    it('measureViewport clears dirty status for measured rows', () => {
+      const mgr = createManager({ cellPadding: 0, minRowHeight: 0 });
+      mgr.markDirtyRows([0, 1, 5]);
+      mgr.setLayers([createMockLayer(new Map([[0, 30], [1, 40]]))]);
+
+      const rc = mockRenderContext();
+      mgr.measureViewport(rc, rowStore);
+
+      // Rows 0 and 1 measured — no longer dirty
+      expect(mgr.isRowDirty(0)).toBe(false);
+      expect(mgr.isRowDirty(1)).toBe(false);
+      // Row 5 was dirty but not measured (not in layer output) — still dirty
+      expect(mgr.isRowDirty(5)).toBe(true);
+      expect(mgr.dirtyRowCount).toBe(1);
+    });
+
+    it('duplicate markDirtyRows calls are idempotent', () => {
+      const mgr = createManager();
+      mgr.markDirtyRows([1, 2]);
+      mgr.markDirtyRows([2, 3]);
+      expect(mgr.dirtyRowCount).toBe(3); // 1, 2, 3
+    });
+
+    it('startDirtyMeasurement does nothing with no dirty rows', () => {
+      const mgr = createManager();
+      const buildRc = vi.fn();
+      mgr.startDirtyMeasurement(buildRc, rowStore);
+      expect(mgr.isMeasuring).toBe(false);
+      expect(buildRc).not.toHaveBeenCalled();
+    });
+
+    it('startDirtyMeasurement does nothing after destroy', () => {
+      const mgr = createManager();
+      mgr.markDirtyRows([1, 2]);
+      mgr.destroy();
+      const buildRc = vi.fn();
+      mgr.startDirtyMeasurement(buildRc, rowStore);
+      expect(mgr.isMeasuring).toBe(false);
+    });
+  });
+});
diff --git a/packages/core/tests/benchmark-suite.test.ts b/packages/core/tests/benchmark-suite.test.ts
new file mode 100644
index 0000000..da6c4f2
--- /dev/null
+++ b/packages/core/tests/benchmark-suite.test.ts
@@ -0,0 +1,306 @@
+// @vitest-environment jsdom
+/**
+ * Comprehensive benchmark suite for @witqq/spreadsheet.
+ *
+ * Measures 6 key operations across 1K, 10K, and 100K row datasets:
+ *   1. Initial render time (LayoutEngine + CellStore bulk load)
+ *   2. Scroll performance (binary search hit-testing throughput)
+ *   3. Cell update latency (single cell set + layout recalc)
+ *   4. Text measurement throughput (cache hit and miss paths)
+ *   5. Layout recalculation speed (row height changes → cumulative recompute)
+ *   6. Memory usage after data load
+ *
+ * Results are collected in a BenchmarkRunner and output as JSON.
+ * Run with: npx vitest run packages/core/tests/benchmark-suite.test.ts
+ */
+
+import { describe, it, expect } from 'vitest';
+import { LayoutEngine } from '../src/renderer/layout-engine';
+import { CellStore } from '../src/model/cell-store';
+import { TextMeasureCache } from '../src/renderer/text-measure-cache';
+import { RowStore } from '../src/model/row-store';
+import {
+  measureMultiRun,
+  measureThroughput,
+  BenchmarkRunner,
+} from '../src/benchmark/performance-benchmark';
+
+const DATASETS = [
+  { label: '1K', rowCount: 1_000 },
+  { label: '10K', rowCount: 10_000 },
+  { label: '100K', rowCount: 100_000 },
+] as const;
+
+const COL_COUNT = 20;
+const BENCHMARK_RUNS = 5;
+// Variance threshold: CV < 0.30 is realistic for non-isolated environments
+const MAX_CV = 0.30;
+
+function makeColumns(count: number) {
+  return Array.from({ length: count }, (_, i) => ({
+    key: `col${i}`,
+    header: `Column ${i}`,
+    width: 80 + (i % 5) * 20,
+  }));
+}
+
+function makeColumnKeys(count: number): string[] {
+  return Array.from({ length: count }, (_, i) => `col${i}`);
+}
+
+function generateRow(index: number): Record<string, unknown> {
+  const row: Record<string, unknown> = {};
+  for (let c = 0; c < COL_COUNT; c++) {
+    row[`col${c}`] = c % 3 === 0
+      ? `Row ${index} Col ${c} with some text`
+      : c % 3 === 1
+        ? index * 100 + c
+        : index % 2 === 0;
+  }
+  return row;
+}
+
+// Canvas mock for TextMeasureCache benchmarks (jsdom doesn't support canvas)
+function createMockCtx(): CanvasRenderingContext2D {
+  let currentFont = '';
+  return {
+    get font() { return currentFont; },
+    set font(f: string) { currentFont = f; },
+    measureText(text: string) {
+      // Approximate: 7px per character (consistent for benchmarking)
+      return { width: text.length * 7 } as TextMetrics;
+    },
+  } as unknown as CanvasRenderingContext2D;
+}
+
+describe('Benchmark Suite', { timeout: 30_000 }, () => {
+  const runner = new BenchmarkRunner();
+  const columns = makeColumns(COL_COUNT);
+  const columnKeys = makeColumnKeys(COL_COUNT);
+
+  describe('1. Initial render time (LayoutEngine + bulk data load)', () => {
+    for (const { label, rowCount } of DATASETS) {
+      it(`${label} rows`, () => {
+        const stats = measureMultiRun(() => {
+          const layout = new LayoutEngine({
+            columns,
+            rowCount,
+            rowHeight: 32,
+            headerHeight: 36,
+            rowNumberWidth: 50,
+          });
+          const store = new CellStore();
+          store.bulkGenerate(0, rowCount, columnKeys, generateRow);
+
+          // Verify creation
+          expect(layout.rowCount).toBe(rowCount);
+          expect(store.get(0, 0)?.value).toBeDefined();
+        }, BENCHMARK_RUNS);
+
+        runner.record('initial-render', label, stats);
+        if (stats.cv >= MAX_CV) console.warn(`  ⚠ High variance: cv=${(stats.cv * 100).toFixed(1)}% (threshold: ${MAX_CV * 100}%)`);
+      });
+    }
+  });
+
+  describe('2. Scroll performance (hit-test throughput)', () => {
+    for (const { label, rowCount } of DATASETS) {
+      it(`${label} rows`, () => {
+        const layout = new LayoutEngine({
+          columns,
+          rowCount,
+          rowHeight: 32,
+          headerHeight: 36,
+          rowNumberWidth: 50,
+        });
+
+        const HIT_TEST_OPS = 50_000;
+        const maxY = layout.contentHeight;
+
+        const stats = measureMultiRun(() => {
+          for (let i = 0; i < HIT_TEST_OPS; i++) {
+            const y = (i * 7919) % maxY; // deterministic pseudo-random
+            layout.getRowAtY(y);
+          }
+        }, BENCHMARK_RUNS);
+
+        runner.record('scroll-hit-test', label, stats);
+        if (stats.cv >= MAX_CV) console.warn(`  ⚠ High variance: cv=${(stats.cv * 100).toFixed(1)}% (threshold: ${MAX_CV * 100}%)`);
+      });
+    }
+  });
+
+  describe('3. Cell update latency', () => {
+    for (const { label, rowCount } of DATASETS) {
+      it(`${label} rows`, () => {
+        const layout = new LayoutEngine({
+          columns,
+          rowCount,
+          rowHeight: 32,
+          headerHeight: 36,
+          rowNumberWidth: 50,
+        });
+        const store = new CellStore();
+        store.bulkGenerate(0, rowCount, columnKeys, generateRow);
+
+        const UPDATE_OPS = 1_000;
+
+        const stats = measureMultiRun(() => {
+          for (let i = 0; i < UPDATE_OPS; i++) {
+            const row = (i * 97) % rowCount;
+            const col = i % COL_COUNT;
+            store.set(row, col, { value: `updated-${i}` });
+            // Simulate layout recalc for the row
+            layout.setRowHeight(row, 32 + (i % 10));
+          }
+        }, BENCHMARK_RUNS);
+
+        runner.record('cell-update-latency', label, stats);
+        if (stats.cv >= MAX_CV) console.warn(`  ⚠ High variance: cv=${(stats.cv * 100).toFixed(1)}% (threshold: ${MAX_CV * 100}%)`);
+      });
+    }
+  });
+
+  describe('4. Text measurement throughput', () => {
+    for (const { label, rowCount } of DATASETS) {
+      it(`${label} rows`, () => {
+        const ctx = createMockCtx();
+        const cache = new TextMeasureCache(10_000);
+        const font = '14px Arial';
+        const textCount = Math.min(rowCount, 10_000);
+
+        // Prepare unique texts
+        const texts: string[] = [];
+        for (let i = 0; i < textCount; i++) {
+          texts.push(`Row ${i} sample text for measurement`);
+        }
+
+        // Measure cold path (cache miss)
+        const coldStats = measureMultiRun(() => {
+          cache.clear();
+          for (let i = 0; i < textCount; i++) {
+            cache.measureText(ctx, texts[i], font);
+          }
+        }, BENCHMARK_RUNS);
+
+        // Measure hot path (cache hit) — run enough iterations for stable timing
+        cache.clear();
+        for (const t of texts) cache.measureText(ctx, t, font);
+        const hotPasses = Math.max(10, Math.ceil(50_000 / textCount));
+
+        const hotStats = measureMultiRun(() => {
+          for (let pass = 0; pass < hotPasses; pass++) {
+            for (let i = 0; i < textCount; i++) {
+              cache.measureText(ctx, texts[i], font);
+            }
+          }
+        }, BENCHMARK_RUNS);
+
+        runner.record('text-measure-cold', label, coldStats);
+        runner.record('text-measure-hot', label, hotStats);
+        if (coldStats.cv >= MAX_CV) console.warn(`  ⚠ High cold variance: cv=${(coldStats.cv * 100).toFixed(1)}%`);
+        if (hotStats.cv >= MAX_CV) console.warn(`  ⚠ High hot variance: cv=${(hotStats.cv * 100).toFixed(1)}%`);
+      });
+    }
+  });
+
+  describe('5. Layout recalculation speed', () => {
+    for (const { label, rowCount } of DATASETS) {
+      it(`${label} rows`, () => {
+        const layout = new LayoutEngine({
+          columns,
+          rowCount,
+          rowHeight: 32,
+          headerHeight: 36,
+          rowNumberWidth: 50,
+        });
+
+        // Measure recalc triggered by row height changes at various positions
+        const RECALC_OPS = 100;
+
+        const stats = measureMultiRun(() => {
+          for (let i = 0; i < RECALC_OPS; i++) {
+            const row = Math.floor((i / RECALC_OPS) * rowCount);
+            layout.setRowHeight(row, 28 + (i % 20));
+          }
+        }, BENCHMARK_RUNS);
+
+        runner.record('layout-recalc', label, stats);
+        if (stats.cv >= MAX_CV) console.warn(`  ⚠ High variance: cv=${(stats.cv * 100).toFixed(1)}% (threshold: ${MAX_CV * 100}%)`);
+      });
+    }
+  });
+
+  describe('6. Memory usage after data load', () => {
+    for (const { label, rowCount } of DATASETS) {
+      it(`${label} rows`, () => {
+        // Force GC if available
+        if (typeof globalThis.gc === 'function') globalThis.gc();
+
+        const heapBefore = (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory?.usedJSHeapSize ?? 0;
+
+        const layout = new LayoutEngine({
+          columns,
+          rowCount,
+          rowHeight: 32,
+          headerHeight: 36,
+          rowNumberWidth: 50,
+        });
+        const store = new CellStore();
+        store.bulkGenerate(0, rowCount, columnKeys, generateRow);
+
+        const heapAfter = (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory?.usedJSHeapSize ?? 0;
+
+        const memoryMB = heapBefore > 0
+          ? (heapAfter - heapBefore) / (1024 * 1024)
+          : NaN;
+
+        // Keep references alive so GC doesn't collect them
+        expect(layout.rowCount).toBe(rowCount);
+        expect(store.get(0, 0)).toBeDefined();
+
+        // Record memory metric (NaN if API unavailable)
+        runner.record(
+          'memory-after-load',
+          label,
+          {
+            medianMs: memoryMB,
+            meanMs: memoryMB,
+            minMs: memoryMB,
+            maxMs: memoryMB,
+            cv: 0,
+            runs: [memoryMB],
+          },
+          'MB',
+        );
+
+        // Memory test is informational — no strict assertion
+        // since heap APIs differ across environments
+        expect(true).toBe(true);
+      });
+    }
+  });
+
+  it('outputs JSON results', () => {
+    const result = runner.toJSON();
+    expect(result.timestamp).toBeTruthy();
+    expect(result.metrics.length).toBeGreaterThan(0);
+
+    // Output results as JSON for external consumption
+    const json = JSON.stringify(result, null, 2);
+    console.log('\n=== BENCHMARK RESULTS ===');
+    console.log(json);
+    console.log('=== END BENCHMARK RESULTS ===\n');
+
+    // Summary table
+    console.log('Benchmark Summary:');
+    console.log('-'.repeat(70));
+    for (const m of result.metrics) {
+      const value = m.unit === 'MB'
+        ? (isNaN(m.stats.medianMs) ? 'N/A' : `${m.stats.medianMs.toFixed(1)} MB`)
+        : `${m.stats.medianMs.toFixed(2)} ms (cv=${(m.stats.cv * 100).toFixed(1)}%)`;
+      console.log(`  ${m.name.padEnd(22)} ${m.dataset.padEnd(6)} ${value}`);
+    }
+    console.log('-'.repeat(70));
+  });
+});
diff --git a/packages/core/tests/cell-editor-registry.test.ts b/packages/core/tests/cell-editor-registry.test.ts
new file mode 100644
index 0000000..ae72b12
--- /dev/null
+++ b/packages/core/tests/cell-editor-registry.test.ts
@@ -0,0 +1,148 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CellEditorRegistry } from '../src/editing/cell-editor-registry';
+import type { CellEditor } from '../src/editing/cell-editor';
+import type { ColumnDef } from '../src/types/interfaces';
+import type { SpreadsheetTheme } from '../src/themes/theme-types';
+import type { ResolvedLocale } from '../src/locale/resolve-locale';
+
+/** Minimal CellEditor stub for testing. */
+function createStubEditor(id: string): CellEditor {
+  return {
+    id,
+    isOpen: false,
+    editingRow: -1,
+    editingCol: -1,
+    open: vi.fn(),
+    close: vi.fn(),
+    setTheme: vi.fn(),
+    setLocale: vi.fn(),
+    destroy: vi.fn(),
+  };
+}
+
+function colDef(overrides: Partial<ColumnDef> = {}): ColumnDef {
+  return { id: 'col-a', header: 'A', width: 100, ...overrides };
+}
+
+describe('CellEditorRegistry', () => {
+  let registry: CellEditorRegistry;
+
+  beforeEach(() => {
+    registry = new CellEditorRegistry();
+  });
+
+  it('returns null when no editors registered', () => {
+    expect(registry.resolve(colDef({ type: 'date' }), null)).toBeNull();
+  });
+
+  it('resolves editor by column type', () => {
+    const editor = createStubEditor('date-picker');
+    registry.registerForType(editor, 'date');
+
+    expect(registry.resolve(colDef({ type: 'date' }), null)).toBe(editor);
+    expect(registry.resolve(colDef({ type: 'text' }), null)).toBeNull();
+    expect(registry.resolve(colDef(), null)).toBeNull();
+  });
+
+  it('resolves editor by custom predicate', () => {
+    const editor = createStubEditor('custom');
+    registry.register(editor, (col) => col.id === 'special-col', 0);
+
+    expect(registry.resolve(colDef({ id: 'special-col' }), null)).toBe(editor);
+    expect(registry.resolve(colDef({ id: 'other' }), null)).toBeNull();
+  });
+
+  it('higher priority wins when multiple editors match', () => {
+    const low = createStubEditor('low');
+    const high = createStubEditor('high');
+
+    registry.register(low, () => true, 0);
+    registry.register(high, () => true, 10);
+
+    expect(registry.resolve(colDef(), null)).toBe(high);
+  });
+
+  it('first registered wins at same priority', () => {
+    const first = createStubEditor('first');
+    const second = createStubEditor('second');
+
+    registry.register(first, () => true, 5);
+    registry.register(second, () => true, 5);
+
+    // Same priority — sort is stable, both at 5, order preserved
+    const result = registry.resolve(colDef(), null);
+    expect(result?.id).toBe('first');
+  });
+
+  it('getAll deduplicates same editor registered for multiple types', () => {
+    const editor = createStubEditor('multi');
+    registry.registerForType(editor, 'date');
+    registry.registerForType(editor, 'datetime');
+
+    expect(registry.getAll()).toEqual([editor]);
+  });
+
+  it('getAll returns all unique editors', () => {
+    const a = createStubEditor('a');
+    const b = createStubEditor('b');
+    registry.register(a, () => true, 0);
+    registry.register(b, () => true, 1);
+
+    const all = registry.getAll();
+    expect(all).toHaveLength(2);
+    expect(all).toContain(a);
+    expect(all).toContain(b);
+  });
+
+  it('setTheme propagates to all editors', () => {
+    const a = createStubEditor('a');
+    const b = createStubEditor('b');
+    registry.register(a, () => true, 0);
+    registry.register(b, () => true, 1);
+
+    const theme = {} as SpreadsheetTheme;
+    registry.setTheme(theme);
+
+    expect(a.setTheme).toHaveBeenCalledWith(theme);
+    expect(b.setTheme).toHaveBeenCalledWith(theme);
+  });
+
+  it('setLocale propagates to all editors', () => {
+    const a = createStubEditor('a');
+    registry.register(a, () => true, 0);
+
+    const locale = {} as ResolvedLocale;
+    registry.setLocale(locale);
+
+    expect(a.setLocale).toHaveBeenCalledWith(locale);
+  });
+
+  it('destroy calls destroy on all editors and clears registry', () => {
+    const a = createStubEditor('a');
+    const b = createStubEditor('b');
+    registry.register(a, () => true, 0);
+    registry.register(b, () => true, 1);
+
+    registry.destroy();
+
+    expect(a.destroy).toHaveBeenCalled();
+    expect(b.destroy).toHaveBeenCalled();
+    // After destroy, resolve returns null
+    expect(registry.resolve(colDef(), null)).toBeNull();
+    expect(registry.getAll()).toEqual([]);
+  });
+
+  it('matcher receives both column and value', () => {
+    const editor = createStubEditor('value-check');
+    const matcher = vi.fn().mockReturnValue(true);
+    registry.register(editor, matcher, 0);
+
+    const col = colDef({ id: 'x' });
+    registry.resolve(col, 42);
+
+    expect(matcher).toHaveBeenCalledWith(col, 42);
+  });
+});
diff --git a/packages/core/tests/cell-type-registry.test.ts b/packages/core/tests/cell-type-registry.test.ts
index f1f3122..b5ca8ec 100644
--- a/packages/core/tests/cell-type-registry.test.ts
+++ b/packages/core/tests/cell-type-registry.test.ts
@@ -265,5 +265,95 @@ describe('CellTypeRegistry', () => {
       registry.register('number', customNumber);
       expect(registry.get('number').format(42)).toBe('$42');
     });
+
+    it('registers custom renderer with measureHeight', () => {
+      const registry = new CellTypeRegistry();
+      const customRenderer: CellTypeRenderer = {
+        format: (v) => String(v),
+        align: 'left',
+        measureHeight: (_ctx, _value, width, _theme) => {
+          // Example: simulate height based on text that fills width
+          return width > 100 ? 28 : 56;
+        },
+      };
+      registry.register('custom', customRenderer);
+      const renderer = registry.get('custom');
+      expect(renderer.measureHeight).toBeTypeOf('function');
+
+      const ctx = {} as CanvasRenderingContext2D;
+      const theme = lightTheme;
+      expect(renderer.measureHeight!(ctx, 'test', 200, theme)).toBe(28);
+      expect(renderer.measureHeight!(ctx, 'test', 50, theme)).toBe(56);
+    });
+
+    it('built-in renderers do not have measureHeight', () => {
+      const registry = new CellTypeRegistry();
+      expect(registry.get('string').measureHeight).toBeUndefined();
+      expect(registry.get('number').measureHeight).toBeUndefined();
+      expect(registry.get('boolean').measureHeight).toBeUndefined();
+      expect(registry.get('date').measureHeight).toBeUndefined();
+    });
+  });
+
+  describe('setFormatLocale', () => {
+    it('defaults to en-US format locale', () => {
+      const registry = new CellTypeRegistry();
+      expect(registry.getFormatLocale()).toBe('en-US');
+    });
+
+    it('changes number formatting to specified locale', () => {
+      const registry = new CellTypeRegistry();
+      registry.setFormatLocale('de-DE');
+      expect(registry.getFormatLocale()).toBe('de-DE');
+      const formatted = registry.get('number').format(1234.56);
+      // German locale uses comma for decimal
+      expect(formatted).toContain(',');
+    });
+
+    it('changes date formatting to specified locale', () => {
+      const registry = new CellTypeRegistry();
+      registry.setFormatLocale('ru-RU');
+      const date = new Date(2025, 0, 15);
+      const formatted = registry.get('date').format(date);
+      // Russian date format: DD.MM.YYYY
+      expect(formatted).toContain('15');
+    });
+
+    it('preserves number renderer alignment after locale change', () => {
+      const registry = new CellTypeRegistry();
+      registry.setFormatLocale('fr-FR');
+      expect(registry.get('number').align).toBe('right');
+    });
+
+    it('preserves date renderer alignment after locale change', () => {
+      const registry = new CellTypeRegistry();
+      registry.setFormatLocale('ja-JP');
+      expect(registry.get('date').align).toBe('left');
+    });
+
+    it('handles null/undefined values after locale change', () => {
+      const registry = new CellTypeRegistry();
+      registry.setFormatLocale('ru-RU');
+      expect(registry.get('number').format(null)).toBe('');
+      expect(registry.get('number').format(undefined)).toBe('');
+      expect(registry.get('date').format(null)).toBe('');
+      expect(registry.get('date').format(undefined)).toBe('');
+    });
+
+    it('formats string dates with new locale', () => {
+      const registry = new CellTypeRegistry();
+      registry.setFormatLocale('en-GB');
+      const formatted = registry.get('date').format('2025-01-15');
+      expect(formatted).toContain('15');
+    });
+
+    it('does not affect string and boolean renderers', () => {
+      const registry = new CellTypeRegistry();
+      const strBefore = registry.get('string').format('test');
+      const boolBefore = registry.get('boolean').format(true);
+      registry.setFormatLocale('ja-JP');
+      expect(registry.get('string').format('test')).toBe(strBefore);
+      expect(registry.get('boolean').format(true)).toBe(boolBefore);
+    });
   });
 });
diff --git a/packages/core/tests/column-stretch-manager.test.ts b/packages/core/tests/column-stretch-manager.test.ts
new file mode 100644
index 0000000..d032e93
--- /dev/null
+++ b/packages/core/tests/column-stretch-manager.test.ts
@@ -0,0 +1,274 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+import { describe, it, expect, vi } from 'vitest';
+import {
+  ColumnStretchManager,
+  type ColumnStretchConfig,
+} from '../src/resize/column-stretch-manager';
+import type { ColumnDef } from '../src/types/interfaces';
+
+function makeColumns(widths: number[], options?: Partial<ColumnDef>[]): ColumnDef[] {
+  return widths.map((w, i) => ({
+    key: `col${i}`,
+    title: `Col ${i}`,
+    width: w,
+    ...(options?.[i] ?? {}),
+  }));
+}
+
+function makeWidthGetter(widths: number[]) {
+  return (colIndex: number) => widths[colIndex] ?? 0;
+}
+
+describe('ColumnStretchManager', () => {
+  describe('mode: last', () => {
+    it('should give all extra space to last column', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([100, 100, 100]);
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([100, 100, 100]));
+
+      expect(result).not.toBeNull();
+      expect(result!.size).toBe(1);
+      // Last visible column (index 2) gets 500 - 300 = 200 extra → 100 + 200 = 300
+      expect(result!.get(2)).toBe(300);
+    });
+
+    it('should return null when columns fill container', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([200, 200, 200]);
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([200, 200, 200]));
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null when columns exceed container', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([300, 300]);
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([300, 300]));
+
+      expect(result).toBeNull();
+    });
+
+    it('should skip hidden columns', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([100, 100, 100], [
+        {},
+        { hidden: true },
+        {},
+      ]);
+      // Only 2 visible columns (indices 0 and 2)
+      const result = mgr.calculate(cols, 400, 0, makeWidthGetter([100, 100]));
+
+      expect(result).not.toBeNull();
+      // Last visible index is 1 (second visible col)
+      expect(result!.get(1)).toBe(300);
+    });
+
+    it('should return null for zero container width', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([100]);
+      const result = mgr.calculate(cols, 0, 0, makeWidthGetter([100]));
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('mode: all', () => {
+    it('should distribute extra space evenly', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100, 100]);
+      const result = mgr.calculate(cols, 600, 0, makeWidthGetter([100, 100, 100]));
+
+      expect(result).not.toBeNull();
+      expect(result!.size).toBe(3);
+      // 600 - 300 = 300 extra, 300/3 = 100 per col → 100+100 = 200 each
+      expect(result!.get(0)).toBe(200);
+      expect(result!.get(1)).toBe(200);
+      expect(result!.get(2)).toBe(200);
+    });
+
+    it('should exclude frozen columns from stretch', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100, 100]);
+      // First column is frozen
+      const result = mgr.calculate(cols, 500, 1, makeWidthGetter([100, 100, 100]));
+
+      expect(result).not.toBeNull();
+      // 500 - 300 = 200 extra, 2 stretchable cols → 100 each
+      expect(result!.has(0)).toBe(false);
+      expect(result!.get(1)).toBe(200);
+      expect(result!.get(2)).toBe(200);
+    });
+
+    it('should exclude manually resized columns from stretch', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100, 100]);
+
+      mgr.markManualResize(1);
+      const result = mgr.calculate(cols, 600, 0, makeWidthGetter([100, 100, 100]));
+
+      expect(result).not.toBeNull();
+      // 600 - 300 = 300 extra, 2 stretchable cols → 150 each
+      expect(result!.has(1)).toBe(false);
+      expect(result!.get(0)).toBe(250);
+      expect(result!.get(2)).toBe(250);
+    });
+
+    it('should respect col.frozen property', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100, 100], [{ frozen: true }, {}, {}]);
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([100, 100, 100]));
+
+      expect(result).not.toBeNull();
+      expect(result!.has(0)).toBe(false);
+      expect(result!.get(1)).toBe(200);
+      expect(result!.get(2)).toBe(200);
+    });
+
+    it('should fall back to last mode when all columns are frozen/manual', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100]);
+
+      mgr.markManualResize(0);
+      mgr.markManualResize(1);
+      const result = mgr.calculate(cols, 400, 0, makeWidthGetter([100, 100]));
+
+      expect(result).not.toBeNull();
+      // Falls back to last mode: last col gets all extra
+      expect(result!.get(1)).toBe(300);
+    });
+
+    it('should respect minWidth from ColumnDef', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([10, 10, 10], [
+        { minWidth: 50 },
+        { minWidth: 50 },
+        { minWidth: 50 },
+      ]);
+      // 10 + 10 + 10 = 30, container = 35, extra = 5, per col = 1.67
+      // 10 + 1.67 < 50 → clamped to 50
+      const result = mgr.calculate(cols, 35, 0, makeWidthGetter([10, 10, 10]));
+
+      expect(result).not.toBeNull();
+      for (const [, width] of result!) {
+        expect(width).toBeGreaterThanOrEqual(50);
+      }
+    });
+
+    it('should use default minWidth of 30 when not specified', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([5, 5, 5]);
+      // 5 + 5 + 5 = 15, container = 16, extra = 1, per col = 0.33
+      // 5 + 0.33 < 30 → clamped to 30
+      const result = mgr.calculate(cols, 16, 0, makeWidthGetter([5, 5, 5]));
+
+      expect(result).not.toBeNull();
+      for (const [, width] of result!) {
+        expect(width).toBeGreaterThanOrEqual(30);
+      }
+    });
+  });
+
+  describe('recalculate()', () => {
+    it('should call applyWidths with calculated updates', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([100, 100]);
+
+      mgr.recalculate(cols, 400, 0, makeWidthGetter([100, 100]));
+
+      expect(applyCb).toHaveBeenCalledTimes(1);
+      const updates = applyCb.mock.calls[0][0] as Map<number, number>;
+      expect(updates.get(1)).toBe(300);
+    });
+
+    it('should not call applyWidths when no stretch needed', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([200, 200]);
+
+      mgr.recalculate(cols, 300, 0, makeWidthGetter([200, 200]));
+
+      expect(applyCb).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('clearManualResizes()', () => {
+    it('should restore columns as stretchable after clear', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100]);
+
+      mgr.markManualResize(0);
+      let result = mgr.calculate(cols, 400, 0, makeWidthGetter([100, 100]));
+      expect(result!.has(0)).toBe(false);
+
+      mgr.clearManualResizes();
+      result = mgr.calculate(cols, 400, 0, makeWidthGetter([100, 100]));
+      expect(result!.has(0)).toBe(true);
+      expect(result!.has(1)).toBe(true);
+    });
+  });
+
+  describe('destroy()', () => {
+    it('should return null after destroy', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'last' }, applyCb);
+      const cols = makeColumns([100]);
+
+      mgr.destroy();
+      expect(mgr.isDestroyed).toBe(true);
+
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([100]));
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty columns array', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const result = mgr.calculate([], 500, 0, makeWidthGetter([]));
+      expect(result).toBeNull();
+    });
+
+    it('should handle all columns hidden', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100, 100], [{ hidden: true }, { hidden: true }]);
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([]));
+      expect(result).toBeNull();
+    });
+
+    it('should handle single column in all mode', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100]);
+      const result = mgr.calculate(cols, 500, 0, makeWidthGetter([100]));
+
+      expect(result).not.toBeNull();
+      expect(result!.get(0)).toBe(500);
+    });
+
+    it('should handle negative container width', () => {
+      const applyCb = vi.fn();
+      const mgr = new ColumnStretchManager({ mode: 'all' }, applyCb);
+      const cols = makeColumns([100]);
+      const result = mgr.calculate(cols, -10, 0, makeWidthGetter([100]));
+      expect(result).toBeNull();
+    });
+  });
+});
diff --git a/packages/core/tests/context-menu.test.ts b/packages/core/tests/context-menu.test.ts
index e62acf0..f0d953a 100644
--- a/packages/core/tests/context-menu.test.ts
+++ b/packages/core/tests/context-menu.test.ts
@@ -480,4 +480,516 @@ describe('ContextMenuManager', () => {
       expect(children.length).toBe(3);
     });
   });
+
+  describe('submenu support', () => {
+    it('should render chevron indicator for items with submenu', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: vi.fn() },
+          { id: 'child-2', label: 'Child 2', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+      expect(setup.manager.isOpen).toBe(true);
+
+      const menuItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+      const chevron = menuItem.querySelector('[data-chevron]') as HTMLElement;
+      expect(chevron).toBeTruthy();
+      expect(chevron.textContent).toBe('▸');
+    });
+
+    it('should not render chevron for items without submenu', () => {
+      const item: ContextMenuItem = {
+        id: 'flat',
+        label: 'Flat',
+        contexts: ['cell'],
+        action: vi.fn(),
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const menuItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+      const chevron = menuItem.querySelector('[data-chevron]');
+      expect(chevron).toBeNull();
+    });
+
+    it('should open submenu on click of parent item', () => {
+      const childAction = vi.fn();
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: childAction },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      // Click on the parent item
+      const parentItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+      parentItem.click();
+
+      // Submenu should be open — a second menu panel should exist
+      const panels = setup.container.querySelectorAll('[data-menu-depth]');
+      expect(panels.length).toBe(2);
+      expect(panels[1].getAttribute('data-menu-depth')).toBe('1');
+
+      // Submenu should contain the child item
+      const childItems = panels[1].querySelectorAll('[data-index]');
+      expect(childItems.length).toBe(1);
+      expect(childItems[0].textContent).toContain('Child 1');
+    });
+
+    it('should open submenu on hover with delay', () => {
+      vi.useFakeTimers();
+
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const parentItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+
+      // Trigger mouseenter
+      parentItem.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+
+      // Before delay: no submenu
+      let panels = setup.container.querySelectorAll('[data-menu-depth]');
+      expect(panels.length).toBe(1);
+
+      // After delay: submenu opens
+      vi.advanceTimersByTime(200);
+      panels = setup.container.querySelectorAll('[data-menu-depth]');
+      expect(panels.length).toBe(2);
+
+      vi.useRealTimers();
+    });
+
+    it('should close submenu on ArrowLeft', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+
+      // ArrowDown to focus parent item, ArrowRight to open submenu
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(2);
+
+      // ArrowLeft to close submenu
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(1);
+      expect(setup.manager.isOpen).toBe(true);
+    });
+
+    it('should open submenu on ArrowRight when focused on parent item', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: vi.fn() },
+          { id: 'child-2', label: 'Child 2', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+
+      // ArrowDown to focus item
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      // ArrowRight to open submenu
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+      const panels = setup.container.querySelectorAll('[data-menu-depth]');
+      expect(panels.length).toBe(2);
+
+      // First child should be focused (has a background color set)
+      const childItem = panels[1].querySelector('[data-index="0"]') as HTMLElement;
+      expect(childItem.style.backgroundColor).not.toBe('');
+    });
+
+    it('should execute submenu item action on Enter', () => {
+      const childAction = vi.fn();
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: childAction },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+
+      // Navigate to submenu: ArrowDown → ArrowRight → Enter
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+      expect(childAction).toHaveBeenCalledTimes(1);
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should execute submenu item action on click', () => {
+      const childAction = vi.fn();
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child-1', label: 'Child 1', contexts: ['cell'], action: childAction },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      // Open submenu by clicking parent
+      const parentItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+      parentItem.click();
+
+      // Click on child item in submenu
+      const submenuPanel = setup.container.querySelectorAll('[data-menu-depth]')[1];
+      const childItem = submenuPanel.querySelector('[data-index="0"]') as HTMLElement;
+      childItem.click();
+
+      expect(childAction).toHaveBeenCalledTimes(1);
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should support nested submenus (recursive)', () => {
+      const leafAction = vi.fn();
+      const item: ContextMenuItem = {
+        id: 'l1',
+        label: 'Level 1',
+        contexts: ['cell'],
+        submenu: [
+          {
+            id: 'l2',
+            label: 'Level 2',
+            contexts: ['cell'],
+            submenu: [
+              { id: 'l3', label: 'Level 3', contexts: ['cell'], action: leafAction },
+            ],
+          },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+
+      // Navigate: down → right (L2) → right (L3)
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+      // L2 submenu should be open
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(2);
+
+      // Navigate into L2's submenu (ArrowDown to focus L2 item, then ArrowRight)
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(3);
+
+      // Execute L3 item
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+      expect(leafAction).toHaveBeenCalledTimes(1);
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should close only deepest submenu on Escape (not entire menu)', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child', label: 'Child', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+
+      // Open submenu
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(2);
+
+      // Escape closes submenu but menu stays open
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(1);
+      expect(setup.manager.isOpen).toBe(true);
+
+      // Another Escape closes the entire menu
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should navigate within submenu using ArrowUp/ArrowDown', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'c1', label: 'Child 1', contexts: ['cell'], action: vi.fn() },
+          { id: 'c2', label: 'Child 2', contexts: ['cell'], action: vi.fn() },
+          { id: 'c3', label: 'Child 3', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+
+      // Open submenu
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+      // First child focused (has background highlight)
+      const submenuPanel = setup.container.querySelectorAll('[data-menu-depth]')[1];
+      expect((submenuPanel.querySelector('[data-index="0"]') as HTMLElement).style.backgroundColor).not.toBe('');
+
+      // ArrowDown to focus second child
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      expect((submenuPanel.querySelector('[data-index="1"]') as HTMLElement).style.backgroundColor).not.toBe('');
+      expect((submenuPanel.querySelector('[data-index="0"]') as HTMLElement).style.backgroundColor).toBe('');
+    });
+  });
+
+  describe('empty menu prevention', () => {
+    it('should not open menu when all items are invisible', () => {
+      const item: ContextMenuItem = {
+        id: 'hidden',
+        label: 'Hidden',
+        contexts: ['cell'],
+        action: vi.fn(),
+        isVisible: () => false,
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should hide parent item when all submenu children are invisible', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent with hidden children',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'c1', label: 'C1', contexts: ['cell'], action: vi.fn(), isVisible: () => false },
+          { id: 'c2', label: 'C2', contexts: ['cell'], action: vi.fn(), isVisible: () => false },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      // Menu should not open because the only item has no visible children
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should show parent item when at least one submenu child is visible', () => {
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'c1', label: 'Hidden', contexts: ['cell'], action: vi.fn(), isVisible: () => false },
+          { id: 'c2', label: 'Visible', contexts: ['cell'], action: vi.fn() },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      expect(setup.manager.isOpen).toBe(true);
+      const menuItems = setup.container.querySelectorAll('[data-index]');
+      expect(menuItems.length).toBe(1);
+      expect(menuItems[0].textContent).toContain('Parent');
+    });
+
+    it('should recursively check visibility for nested submenus', () => {
+      const item: ContextMenuItem = {
+        id: 'l1',
+        label: 'Level 1',
+        contexts: ['cell'],
+        submenu: [
+          {
+            id: 'l2',
+            label: 'Level 2',
+            contexts: ['cell'],
+            submenu: [
+              { id: 'l3', label: 'L3', contexts: ['cell'], action: vi.fn(), isVisible: () => false },
+            ],
+          },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      // L3 is hidden → L2 has no visible children → L1 has no visible children → menu doesn't open
+      expect(setup.manager.isOpen).toBe(false);
+    });
+
+    it('should filter invisible children when opening submenu', () => {
+      const visibleAction = vi.fn();
+      const item: ContextMenuItem = {
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'hidden', label: 'Hidden', contexts: ['cell'], action: vi.fn(), isVisible: () => false },
+          { id: 'visible', label: 'Visible', contexts: ['cell'], action: visibleAction },
+        ],
+      };
+
+      setup.manager.registerItem(item);
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+      expect(setup.manager.isOpen).toBe(true);
+
+      // Open submenu
+      const parentItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+      parentItem.click();
+
+      const submenuPanel = setup.container.querySelectorAll('[data-menu-depth]')[1];
+      const childItems = submenuPanel.querySelectorAll('[data-index]');
+      // Only the visible child should be shown
+      expect(childItems.length).toBe(1);
+      expect(childItems[0].textContent).toContain('Visible');
+    });
+  });
+
+  describe('submenu with mixed items', () => {
+    it('should show both flat items and submenu items together', () => {
+      const flatAction = vi.fn();
+      setup.manager.registerItem({
+        id: 'flat',
+        label: 'Flat Item',
+        contexts: ['cell'],
+        action: flatAction,
+      });
+      setup.manager.registerItem({
+        id: 'parent',
+        label: 'Parent Item',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child', label: 'Child', contexts: ['cell'], action: vi.fn() },
+        ],
+      });
+
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+      expect(setup.manager.isOpen).toBe(true);
+
+      const menuItems = setup.container.querySelectorAll('[data-index]');
+      expect(menuItems.length).toBe(2);
+
+      // First item is flat (no chevron)
+      expect(menuItems[0].querySelector('[data-chevron]')).toBeNull();
+      // Second item has chevron
+      expect(menuItems[1].querySelector('[data-chevron]')).toBeTruthy();
+    });
+
+    it('should execute flat item action while submenu items open submenu', () => {
+      const flatAction = vi.fn();
+      setup.manager.registerItem({
+        id: 'flat',
+        label: 'Flat',
+        contexts: ['cell'],
+        action: flatAction,
+      });
+      setup.manager.registerItem({
+        id: 'parent',
+        label: 'Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'child', label: 'Child', contexts: ['cell'], action: vi.fn() },
+        ],
+      });
+
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      // Click flat item → executes action, closes menu
+      const flatItem = setup.container.querySelector('[data-index="0"]') as HTMLElement;
+      flatItem.click();
+      expect(flatAction).toHaveBeenCalledTimes(1);
+      expect(setup.manager.isOpen).toBe(false);
+
+      // Re-open and click parent → opens submenu, menu stays open
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+      const parentItem = setup.container.querySelectorAll('[data-index]')[1] as HTMLElement;
+      parentItem.click();
+      expect(setup.manager.isOpen).toBe(true);
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(2);
+    });
+
+    it('should not crash on ArrowRight when focused item has no submenu', () => {
+      setup.manager.registerItem({
+        id: 'flat',
+        label: 'Flat',
+        contexts: ['cell'],
+        action: vi.fn(),
+      });
+
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      // ArrowRight on a flat item should be a no-op
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+      expect(setup.manager.isOpen).toBe(true);
+      expect(setup.container.querySelectorAll('[data-menu-depth]').length).toBe(1);
+    });
+
+    it('should not crash on ArrowLeft at root level', () => {
+      setup.manager.registerItem({
+        id: 'flat',
+        label: 'Flat',
+        contexts: ['cell'],
+        action: vi.fn(),
+      });
+
+      setup.eventBus.emit('gridContextMenu', createGridMouseEvent('cell', 0, 0));
+
+      const rootMenu = setup.container.querySelector('[tabindex="-1"]') as HTMLElement;
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+      // ArrowLeft at root should be a no-op
+      rootMenu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+      expect(setup.manager.isOpen).toBe(true);
+    });
+  });
 });
diff --git a/packages/core/tests/date-picker-overlay.test.ts b/packages/core/tests/date-picker-overlay.test.ts
new file mode 100644
index 0000000..180a378
--- /dev/null
+++ b/packages/core/tests/date-picker-overlay.test.ts
@@ -0,0 +1,378 @@
+// @vitest-environment jsdom
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { DatePickerOverlay } from '../src/editing/date-picker-overlay';
+import type { DatePickerConfig } from '../src/editing/date-picker-overlay';
+import type { LayoutEngine } from '../src/renderer/layout-engine';
+import type { ScrollManager } from '../src/renderer/scroll-manager';
+import type { SpreadsheetTheme } from '../src/themes/theme-types';
+import { lightTheme } from '../src/themes/built-in-themes';
+
+function createMockContainer(): HTMLElement {
+  const el = document.createElement('div');
+  Object.defineProperty(el, 'getBoundingClientRect', {
+    value: () => ({ left: 0, top: 0, width: 800, height: 600, right: 800, bottom: 600, x: 0, y: 0, toJSON: () => {} }),
+  });
+  return el;
+}
+
+function createMockScrollContainer(): HTMLElement {
+  const el = document.createElement('div');
+  el.tabIndex = 0;
+  return el;
+}
+
+function createMockLayoutEngine(): LayoutEngine {
+  return {
+    getCellRect: vi.fn().mockReturnValue({ x: 100, y: 50, width: 120, height: 28 }),
+    headerHeight: 28,
+    rowHeight: 28,
+  } as unknown as LayoutEngine;
+}
+
+function createMockScrollManager(): ScrollManager {
+  return {
+    scrollX: 0,
+    scrollY: 0,
+    getElement: vi.fn().mockReturnValue(createMockScrollContainer()),
+  } as unknown as ScrollManager;
+}
+
+function createConfig(overrides?: Partial<DatePickerConfig>): DatePickerConfig {
+  return {
+    container: createMockContainer(),
+    scrollContainer: createMockScrollContainer(),
+    layoutEngine: createMockLayoutEngine(),
+    scrollManager: createMockScrollManager(),
+    theme: lightTheme as SpreadsheetTheme,
+    onCommit: vi.fn(),
+    onClose: vi.fn(),
+    frozenRows: 0,
+    frozenColumns: 0,
+    ...overrides,
+  };
+}
+
+describe('DatePickerOverlay', () => {
+  let config: DatePickerConfig;
+  let picker: DatePickerOverlay;
+
+  beforeEach(() => {
+    config = createConfig();
+    picker = new DatePickerOverlay(config);
+  });
+
+  describe('lifecycle', () => {
+    it('starts closed', () => {
+      expect(picker.isOpen).toBe(false);
+    });
+
+    it('opens with a date value', () => {
+      picker.open(0, 0, '2025-03-15');
+      expect(picker.isOpen).toBe(true);
+      expect(picker.editingRow).toBe(0);
+      expect(picker.editingCol).toBe(0);
+    });
+
+    it('opens with null value (shows current month)', () => {
+      picker.open(2, 3, null);
+      expect(picker.isOpen).toBe(true);
+    });
+
+    it('opens with Date object', () => {
+      picker.open(0, 0, new Date(2024, 5, 15));
+      expect(picker.isOpen).toBe(true);
+    });
+
+    it('closes with reason', () => {
+      picker.open(0, 0, null);
+      picker.close('escape');
+      expect(picker.isOpen).toBe(false);
+      expect(config.onClose).toHaveBeenCalledWith('escape');
+    });
+
+    it('appends overlay to container on open', () => {
+      picker.open(0, 0, null);
+      expect(config.container.children.length).toBe(1);
+    });
+
+    it('removes overlay from container on close', () => {
+      picker.open(0, 0, null);
+      picker.close('escape');
+      expect(config.container.children.length).toBe(0);
+    });
+
+    it('commits previous if open when re-opened', () => {
+      const onClose = vi.fn();
+      const cfg = createConfig({ onClose });
+      const p = new DatePickerOverlay(cfg);
+      p.open(0, 0, null);
+      p.open(1, 1, null);
+      expect(onClose).toHaveBeenCalledWith('programmatic');
+      expect(p.isOpen).toBe(true);
+      expect(p.editingRow).toBe(1);
+    });
+
+    it('destroy closes if open', () => {
+      picker.open(0, 0, null);
+      picker.destroy();
+      expect(picker.isOpen).toBe(false);
+      expect(config.onClose).toHaveBeenCalledWith('programmatic');
+    });
+  });
+
+  describe('positioning', () => {
+    it('positions overlay below the cell', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      expect(overlay.style.position).toBe('absolute');
+      // y = 50 (cell top) + 28 (cell height) = 78
+      expect(overlay.style.top).toBe('78px');
+      expect(overlay.style.left).toBe('100px');
+    });
+
+    it('uses z-index 50', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      expect(overlay.style.zIndex).toBe('50');
+    });
+  });
+
+  describe('calendar rendering', () => {
+    it('renders month name and year in header', () => {
+      picker.open(0, 0, '2025-01-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      expect(overlay.textContent).toContain('January');
+      expect(overlay.textContent).toContain('2025');
+    });
+
+    it('renders day-of-week labels', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      expect(overlay.textContent).toContain('Su');
+      expect(overlay.textContent).toContain('Mo');
+      expect(overlay.textContent).toContain('Sa');
+    });
+
+    it('renders correct number of day cells', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const dayCells = overlay.querySelectorAll('[data-day]');
+      expect(dayCells.length).toBe(31); // March has 31 days
+    });
+
+    it('renders 28 days for February (non-leap year)', () => {
+      picker.open(0, 0, '2025-02-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const dayCells = overlay.querySelectorAll('[data-day]');
+      expect(dayCells.length).toBe(28);
+    });
+
+    it('renders Today button', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      const buttons = overlay.querySelectorAll('button');
+      const todayBtn = Array.from(buttons).find(b => b.textContent === 'Today');
+      expect(todayBtn).toBeDefined();
+    });
+
+    it('renders navigation buttons', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      const buttons = overlay.querySelectorAll('button');
+      const prevBtn = Array.from(buttons).find(b => b.textContent === '◀');
+      const nextBtn = Array.from(buttons).find(b => b.textContent === '▶');
+      expect(prevBtn).toBeDefined();
+      expect(nextBtn).toBeDefined();
+    });
+  });
+
+  describe('date selection', () => {
+    it('commits date on day click', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const day20 = overlay.querySelector('[data-day="20"]') as HTMLElement;
+      day20.click();
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-15', '2025-03-20');
+      expect(picker.isOpen).toBe(false);
+    });
+
+    it('commits date in YYYY-MM-DD format', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      const day1 = overlay.querySelector('[data-day="1"]') as HTMLElement;
+      day1.click();
+      const call = (config.onCommit as ReturnType<typeof vi.fn>).mock.calls[0];
+      expect(call[3]).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    });
+
+    it('closes picker after selection', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const day10 = overlay.querySelector('[data-day="10"]') as HTMLElement;
+      day10.click();
+      expect(picker.isOpen).toBe(false);
+      expect(config.onClose).toHaveBeenCalledWith('enter');
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    function pressKey(overlay: HTMLElement, key: string): void {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true });
+      overlay.dispatchEvent(event);
+    }
+
+    it('Escape closes without commit', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'Escape');
+      expect(picker.isOpen).toBe(false);
+      expect(config.onCommit).not.toHaveBeenCalled();
+      expect(config.onClose).toHaveBeenCalledWith('escape');
+    });
+
+    it('Enter selects focused day', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'Enter');
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-15', '2025-03-15');
+    });
+
+    it('ArrowRight moves focus by 1 day', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'ArrowRight');
+      pressKey(overlay, 'Enter');
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-15', '2025-03-16');
+    });
+
+    it('ArrowLeft moves focus by -1 day', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'ArrowLeft');
+      pressKey(overlay, 'Enter');
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-15', '2025-03-14');
+    });
+
+    it('ArrowDown moves focus by 7 days', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'ArrowDown');
+      pressKey(overlay, 'Enter');
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-15', '2025-03-22');
+    });
+
+    it('ArrowUp moves focus by -7 days', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'ArrowUp');
+      pressKey(overlay, 'Enter');
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-15', '2025-03-08');
+    });
+
+    it('Tab selects focused day', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      pressKey(overlay, 'Tab');
+      expect(config.onCommit).toHaveBeenCalled();
+    });
+  });
+
+  describe('month navigation', () => {
+    it('prev button navigates to previous month', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const prevBtn = Array.from(overlay.querySelectorAll('button')).find(b => b.textContent === '◀')!;
+      prevBtn.click();
+      expect(overlay.textContent).toContain('February');
+    });
+
+    it('next button navigates to next month', () => {
+      picker.open(0, 0, '2025-03-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const nextBtn = Array.from(overlay.querySelectorAll('button')).find(b => b.textContent === '▶')!;
+      nextBtn.click();
+      expect(overlay.textContent).toContain('April');
+    });
+
+    it('navigating past December wraps to next year January', () => {
+      picker.open(0, 0, '2025-12-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const nextBtn = Array.from(overlay.querySelectorAll('button')).find(b => b.textContent === '▶')!;
+      nextBtn.click();
+      expect(overlay.textContent).toContain('January');
+      expect(overlay.textContent).toContain('2026');
+    });
+
+    it('navigating before January wraps to previous year December', () => {
+      picker.open(0, 0, '2025-01-15');
+      const overlay = config.container.children[0] as HTMLElement;
+      const prevBtn = Array.from(overlay.querySelectorAll('button')).find(b => b.textContent === '◀')!;
+      prevBtn.click();
+      expect(overlay.textContent).toContain('December');
+      expect(overlay.textContent).toContain('2024');
+    });
+
+    it('arrow key past month end navigates to next month', () => {
+      picker.open(0, 0, '2025-03-31');
+      const overlay = config.container.children[0] as HTMLElement;
+      const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true });
+      overlay.dispatchEvent(event);
+      // Should now be April 1
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+      overlay.dispatchEvent(enterEvent);
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-31', '2025-04-01');
+    });
+
+    it('arrow key before month start navigates to previous month', () => {
+      picker.open(0, 0, '2025-03-01');
+      const overlay = config.container.children[0] as HTMLElement;
+      const event = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true });
+      overlay.dispatchEvent(event);
+      // Should now be Feb 28
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+      overlay.dispatchEvent(enterEvent);
+      expect(config.onCommit).toHaveBeenCalledWith(0, 0, '2025-03-01', '2025-02-28');
+    });
+  });
+
+  describe('scroll handling', () => {
+    it('scroll event closes picker', () => {
+      picker.open(0, 0, null);
+      config.scrollContainer.dispatchEvent(new Event('scroll'));
+      expect(picker.isOpen).toBe(false);
+      expect(config.onClose).toHaveBeenCalledWith('scroll');
+    });
+
+    it('scroll does not close for frozen corner cells', () => {
+      const cfg = createConfig({ frozenRows: 1, frozenColumns: 1 });
+      const p = new DatePickerOverlay(cfg);
+      p.open(0, 0, null); // row 0 < frozenRows, col 0 < frozenCols
+      cfg.scrollContainer.dispatchEvent(new Event('scroll'));
+      expect(p.isOpen).toBe(true);
+    });
+  });
+
+  describe('setTheme', () => {
+    it('updates theme without error', () => {
+      const newTheme = { ...lightTheme } as SpreadsheetTheme;
+      expect(() => picker.setTheme(newTheme)).not.toThrow();
+    });
+  });
+
+  describe('aria attributes', () => {
+    it('has role=dialog', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      expect(overlay.getAttribute('role')).toBe('dialog');
+    });
+
+    it('has aria-label', () => {
+      picker.open(0, 0, null);
+      const overlay = config.container.children[0] as HTMLElement;
+      expect(overlay.getAttribute('aria-label')).toBe('Date picker');
+    });
+  });
+});
diff --git a/packages/core/tests/date-time-editor.test.ts b/packages/core/tests/date-time-editor.test.ts
new file mode 100644
index 0000000..e914129
--- /dev/null
+++ b/packages/core/tests/date-time-editor.test.ts
@@ -0,0 +1,366 @@
+// @vitest-environment jsdom
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { DateTimeEditor } from '../src/editing/date-time-editor';
+import type { CellEditorContext, CellEditorCommit, CellEditorClose } from '../src/editing/cell-editor';
+import type { SpreadsheetTheme } from '../src/themes/theme-types';
+import type { ResolvedLocale } from '../src/locale/resolve-locale';
+import type { ColumnDef } from '../src/types/interfaces';
+
+// Minimal theme for tests
+const stubTheme: SpreadsheetTheme = {
+  colors: {
+    cellBackground: '#fff',
+    cellText: '#000',
+    cellEditBackground: '#fff',
+    gridLine: '#ccc',
+    headerBackground: '#f5f5f5',
+    headerText: '#333',
+    selectionBorder: 'blue',
+    selectionFill: 'rgba(0,0,255,0.1)',
+    activeCellBorder: '#4a90d9',
+    frozenLineBorder: '#aaa',
+    scrollbarThumb: '#bbb',
+    scrollbarTrack: '#eee',
+  },
+  fonts: {
+    cell: 'Arial',
+    cellSize: 12,
+    header: 'Arial',
+    headerSize: 12,
+  },
+};
+
+const stubLocale: ResolvedLocale = {
+  formatLocale: 'en-US',
+  datePicker: {
+    weekLabels: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December',
+    ],
+    today: 'Today',
+    ariaLabel: 'Date picker',
+  },
+  dateTimePicker: {
+    hour: 'Hour',
+    minute: 'Minute',
+    now: 'Now',
+    ariaLabel: 'Date and time picker',
+  },
+  contextMenu: {
+    cut: 'Cut', copy: 'Copy', paste: 'Paste',
+    sortAscending: 'Sort Ascending', sortDescending: 'Sort Descending',
+    insertRowAbove: 'Insert Row Above', insertRowBelow: 'Insert Row Below',
+    deleteRow: 'Delete Row',
+  },
+  filter: {
+    equals: 'Equals', notEquals: 'Not equals', contains: 'Contains',
+    startsWith: 'Starts with', endsWith: 'Ends with',
+    greaterThan: 'Greater than', lessThan: 'Less than',
+    greaterOrEqual: 'Greater or equal', lessOrEqual: 'Less or equal',
+    between: 'Between', isEmpty: 'Is empty', isNotEmpty: 'Is not empty',
+    valuePlaceholder: '', toValuePlaceholder: '', apply: 'Apply', clear: 'Clear',
+  },
+  grouping: { sum: 'Sum', count: 'Count', avg: 'Avg', min: 'Min', max: 'Max' },
+  emptyState: { noData: 'No data' },
+  print: { showingRows: '' },
+  aria: {
+    cellAnnouncement: '', cellEmpty: '', sortCleared: '',
+    sortAscending: '', sortDescending: '', sortedBy: '',
+    filterCleared: '', filterActive: '',
+  },
+};
+
+const column: ColumnDef = { key: 'ts', title: 'Timestamp', type: 'datetime' };
+
+function makeContext(value: unknown = null): CellEditorContext {
+  const container = document.createElement('div');
+  Object.defineProperty(container, 'getBoundingClientRect', {
+    value: () => ({ x: 0, y: 0, width: 800, height: 600, top: 0, left: 0, right: 800, bottom: 600 }),
+  });
+  const scrollContainer = document.createElement('div');
+
+  return {
+    row: 2,
+    col: 3,
+    value: value as never,
+    column,
+    container,
+    scrollContainer,
+    layoutEngine: {
+      getCellRect: () => ({ x: 100, y: 50, width: 160, height: 24 }),
+    } as never,
+    scrollManager: {
+      scrollX: 0,
+      scrollY: 0,
+      getElement: () => scrollContainer,
+    } as never,
+    cellStore: {} as never,
+    dataView: {} as never,
+    theme: stubTheme,
+    locale: stubLocale,
+    mergeManager: null,
+    frozenRows: 0,
+    frozenColumns: 0,
+  };
+}
+
+describe('DateTimeEditor', () => {
+  let editor: DateTimeEditor;
+  let commitFn: CellEditorCommit;
+  let closeFn: CellEditorClose;
+
+  beforeEach(() => {
+    editor = new DateTimeEditor();
+    commitFn = vi.fn();
+    closeFn = vi.fn();
+  });
+
+  afterEach(() => {
+    editor.destroy();
+  });
+
+  it('has id "date-time-picker"', () => {
+    expect(editor.id).toBe('date-time-picker');
+  });
+
+  it('starts closed', () => {
+    expect(editor.isOpen).toBe(false);
+    expect(editor.editingRow).toBe(-1);
+    expect(editor.editingCol).toBe(-1);
+  });
+
+  it('opens and renders overlay with time controls', () => {
+    const ctx = makeContext('2025-03-15T14:30');
+    editor.open(ctx, commitFn, closeFn);
+
+    expect(editor.isOpen).toBe(true);
+    expect(editor.editingRow).toBe(2);
+    expect(editor.editingCol).toBe(3);
+    expect(ctx.container.querySelector('[role="dialog"]')).toBeTruthy();
+
+    // Should have time inputs
+    const inputs = ctx.container.querySelectorAll('input[type="text"]');
+    expect(inputs.length).toBe(2); // hour + minute
+    expect((inputs[0] as HTMLInputElement).value).toBe('14');
+    expect((inputs[1] as HTMLInputElement).value).toBe('30');
+  });
+
+  it('parses ISO datetime value correctly', () => {
+    const ctx = makeContext('2024-12-25T09:05');
+    editor.open(ctx, commitFn, closeFn);
+
+    const inputs = ctx.container.querySelectorAll('input[type="text"]');
+    expect((inputs[0] as HTMLInputElement).value).toBe('09');
+    expect((inputs[1] as HTMLInputElement).value).toBe('05');
+
+    // Calendar should show December 2024
+    const title = ctx.container.querySelector('span');
+    expect(title?.textContent).toContain('December');
+    expect(title?.textContent).toContain('2024');
+  });
+
+  it('parses date-only value, defaults time to current', () => {
+    const ctx = makeContext('2025-06-01');
+    editor.open(ctx, commitFn, closeFn);
+
+    // Hour and minute should default to 00 (parsed from date-only)
+    const inputs = ctx.container.querySelectorAll('input[type="text"]');
+    expect((inputs[0] as HTMLInputElement).value).toBe('00');
+    expect((inputs[1] as HTMLInputElement).value).toBe('00');
+  });
+
+  it('commits ISO datetime on Enter key', () => {
+    const ctx = makeContext('2025-03-15T10:45');
+    editor.open(ctx, commitFn, closeFn);
+
+    const overlay = ctx.container.querySelector('[role="dialog"]') as HTMLDivElement;
+    overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(commitFn).toHaveBeenCalledWith(2, 3, '2025-03-15T10:45', '2025-03-15T10:45');
+    expect(editor.isOpen).toBe(false);
+  });
+
+  it('closes on Escape without committing', () => {
+    const ctx = makeContext('2025-01-01T12:00');
+    editor.open(ctx, commitFn, closeFn);
+
+    const overlay = ctx.container.querySelector('[role="dialog"]') as HTMLDivElement;
+    overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+
+    expect(commitFn).not.toHaveBeenCalled();
+    expect(closeFn).toHaveBeenCalledWith('escape');
+    expect(editor.isOpen).toBe(false);
+  });
+
+  it('Tab cycles focus between calendar, hour, minute', () => {
+    const ctx = makeContext('2025-01-15T08:30');
+    editor.open(ctx, commitFn, closeFn);
+
+    const overlay = ctx.container.querySelector('[role="dialog"]') as HTMLDivElement;
+
+    // Tab from calendar → hour: hour input should get focus-ring (boxShadow)
+    overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+    const inputs = ctx.container.querySelectorAll('input[type="text"]');
+    expect((inputs[0] as HTMLInputElement).style.boxShadow).toContain('0 0 0 1px');
+    expect((inputs[1] as HTMLInputElement).style.boxShadow).toBe('');
+
+    // Tab from hour → minute: minute input should get focus-ring
+    (inputs[0] as HTMLInputElement).dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+    );
+    expect((inputs[0] as HTMLInputElement).style.boxShadow).toBe('');
+    expect((inputs[1] as HTMLInputElement).style.boxShadow).toContain('0 0 0 1px');
+  });
+
+  it('clicking a day selects it without committing', () => {
+    const ctx = makeContext('2025-03-01T14:00');
+    editor.open(ctx, commitFn, closeFn);
+
+    // Find day cell "15"
+    const dayCells = ctx.container.querySelectorAll('[data-day]');
+    const day15 = Array.from(dayCells).find(
+      (el) => (el as HTMLElement).dataset.day === '15',
+    ) as HTMLElement;
+    expect(day15).toBeTruthy();
+
+    day15.click();
+
+    // Should NOT commit yet — only select the day
+    expect(commitFn).not.toHaveBeenCalled();
+    expect(editor.isOpen).toBe(true);
+  });
+
+  it('OK button commits the current selection', () => {
+    const ctx = makeContext('2025-03-10T16:20');
+    editor.open(ctx, commitFn, closeFn);
+
+    // Find OK button
+    const buttons = ctx.container.querySelectorAll('button');
+    const okBtn = Array.from(buttons).find((b) => b.textContent === 'OK');
+    expect(okBtn).toBeTruthy();
+
+    okBtn!.click();
+
+    expect(commitFn).toHaveBeenCalledWith(2, 3, '2025-03-10T16:20', '2025-03-10T16:20');
+    expect(editor.isOpen).toBe(false);
+  });
+
+  it('Now button sets current date and time', () => {
+    const ctx = makeContext(null);
+    editor.open(ctx, commitFn, closeFn);
+
+    const buttons = ctx.container.querySelectorAll('button');
+    const nowBtn = Array.from(buttons).find((b) => b.textContent === 'Now');
+    expect(nowBtn).toBeTruthy();
+
+    nowBtn!.click();
+
+    // Editor should still be open (Now just updates, doesn't commit)
+    expect(editor.isOpen).toBe(true);
+    expect(commitFn).not.toHaveBeenCalled();
+  });
+
+  it('arrow keys navigate calendar days', () => {
+    const ctx = makeContext('2025-03-15T10:00');
+    editor.open(ctx, commitFn, closeFn);
+
+    const overlay = ctx.container.querySelector('[role="dialog"]') as HTMLDivElement;
+
+    // ArrowRight moves focus to day 16
+    overlay.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }),
+    );
+
+    // Now Enter should commit with day 16
+    overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+    expect(commitFn).toHaveBeenCalledWith(2, 3, '2025-03-15T10:00', '2025-03-16T10:00');
+  });
+
+  it('month navigation works', () => {
+    const ctx = makeContext('2025-01-15T08:00');
+    editor.open(ctx, commitFn, closeFn);
+
+    // Click next month button (▶)
+    const buttons = ctx.container.querySelectorAll('button');
+    const nextBtn = Array.from(buttons).find((b) => b.textContent === '▶');
+    expect(nextBtn).toBeTruthy();
+    nextBtn!.click();
+
+    // Title should show February 2025
+    const title = ctx.container.querySelector('span');
+    expect(title?.textContent).toContain('February');
+  });
+
+  it('setTheme and setLocale update stored values', () => {
+    const newTheme = { ...stubTheme, colors: { ...stubTheme.colors, cellText: '#111' } };
+    editor.setTheme(newTheme);
+
+    const newLocale = { ...stubLocale, dateTimePicker: { ...stubLocale.dateTimePicker, hour: 'Hora' } };
+    editor.setLocale(newLocale);
+
+    // No error thrown — editor stores them for next open
+    expect(true).toBe(true);
+  });
+
+  it('destroy cleans up open overlay', () => {
+    const ctx = makeContext('2025-01-01T00:00');
+    editor.open(ctx, commitFn, closeFn);
+    expect(editor.isOpen).toBe(true);
+
+    editor.destroy();
+    expect(editor.isOpen).toBe(false);
+    expect(closeFn).toHaveBeenCalledWith('programmatic');
+  });
+
+  it('locale labels are used (RU)', () => {
+    const ruLocale: ResolvedLocale = {
+      ...stubLocale,
+      datePicker: {
+        ...stubLocale.datePicker,
+        monthNames: [
+          'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
+          'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',
+        ],
+      },
+      dateTimePicker: {
+        hour: 'Час',
+        minute: 'Минута',
+        now: 'Сейчас',
+        ariaLabel: 'Выбор даты и времени',
+      },
+    };
+
+    const ctx = makeContext('2025-03-15T10:00');
+    ctx.locale = ruLocale;
+    editor.open(ctx, commitFn, closeFn);
+
+    const title = ctx.container.querySelector('span');
+    expect(title?.textContent).toContain('Март');
+
+    const buttons = ctx.container.querySelectorAll('button');
+    const nowBtn = Array.from(buttons).find((b) => b.textContent === 'Сейчас');
+    expect(nowBtn).toBeTruthy();
+
+    const overlay = ctx.container.querySelector('[role="dialog"]') as HTMLElement;
+    expect(overlay.getAttribute('aria-label')).toBe('Выбор даты и времени');
+  });
+
+  it('re-open closes previous overlay', () => {
+    const ctx1 = makeContext('2025-01-01T00:00');
+    editor.open(ctx1, commitFn, closeFn);
+    expect(editor.isOpen).toBe(true);
+
+    const ctx2 = makeContext('2025-06-15T12:30');
+    editor.open(ctx2, commitFn, closeFn);
+    expect(editor.isOpen).toBe(true);
+
+    // Only one overlay in DOM
+    const overlays = ctx2.container.querySelectorAll('[role="dialog"]');
+    expect(overlays.length).toBe(1);
+  });
+});
diff --git a/packages/core/tests/layout-engine.test.ts b/packages/core/tests/layout-engine.test.ts
index 6607751..66e45d2 100644
--- a/packages/core/tests/layout-engine.test.ts
+++ b/packages/core/tests/layout-engine.test.ts
@@ -245,4 +245,188 @@ describe('LayoutEngine', () => {
       expect(engine.getCellRect(99_999, 0).y).toBe(32 + 99_999 * 28);
     });
   });
+
+  describe('setRowHeightsBatch', () => {
+    it('updates multiple row heights in one call', () => {
+      const engine = new LayoutEngine(makeConfig([100], 10, { rowHeight: 28 }));
+      const updates = new Map([
+        [2, 56],
+        [5, 84],
+      ]);
+      engine.setRowHeightsBatch(updates);
+
+      expect(engine.getRowHeight(2)).toBe(56);
+      expect(engine.getRowHeight(5)).toBe(84);
+      // Unchanged rows keep default
+      expect(engine.getRowHeight(0)).toBe(28);
+      expect(engine.getRowHeight(3)).toBe(28);
+    });
+
+    it('recomputes cumulative positions correctly', () => {
+      const engine = new LayoutEngine(makeConfig([100], 5, { rowHeight: 28, headerHeight: 0, rowNumberWidth: 0 }));
+      // Default: rows at 0, 28, 56, 84, 112; total = 140
+      expect(engine.contentHeight).toBe(140);
+
+      engine.setRowHeightsBatch(new Map([
+        [1, 40], // +12
+        [3, 50], // +22
+      ]));
+
+      // Row positions: 0, 28, 68, 96, 146; total = 174
+      expect(engine.getRowY(0)).toBe(0);
+      expect(engine.getRowY(1)).toBe(28);
+      expect(engine.getRowY(2)).toBe(68); // 28 + 40
+      expect(engine.getRowY(3)).toBe(96); // 68 + 28
+      expect(engine.getRowY(4)).toBe(146); // 96 + 50
+      expect(engine.contentHeight).toBe(174); // 146 + 28
+    });
+
+    it('handles empty updates map', () => {
+      const engine = new LayoutEngine(makeConfig([100], 5, { rowHeight: 28 }));
+      const heightBefore = engine.contentHeight;
+      engine.setRowHeightsBatch(new Map());
+      expect(engine.contentHeight).toBe(heightBefore);
+    });
+
+    it('ignores out-of-bounds row indices', () => {
+      const engine = new LayoutEngine(makeConfig([100], 5, { rowHeight: 28 }));
+      const heightBefore = engine.contentHeight;
+      engine.setRowHeightsBatch(new Map([
+        [-1, 50],
+        [5, 50],
+        [100, 50],
+      ]));
+      expect(engine.contentHeight).toBe(heightBefore);
+    });
+
+    it('produces same result as individual setRowHeight calls', () => {
+      const e1 = new LayoutEngine(makeConfig([100], 10, { rowHeight: 28, headerHeight: 0, rowNumberWidth: 0 }));
+      const e2 = new LayoutEngine(makeConfig([100], 10, { rowHeight: 28, headerHeight: 0, rowNumberWidth: 0 }));
+
+      const updates = new Map([
+        [1, 40],
+        [4, 60],
+        [7, 35],
+      ]);
+
+      // Batch
+      e1.setRowHeightsBatch(updates);
+
+      // Individual
+      for (const [row, h] of updates) {
+        e2.setRowHeight(row, h);
+      }
+
+      // Compare all positions and heights
+      for (let r = 0; r < 10; r++) {
+        expect(e1.getRowHeight(r)).toBe(e2.getRowHeight(r));
+        expect(e1.getRowY(r)).toBe(e2.getRowY(r));
+      }
+      expect(e1.contentHeight).toBe(e2.contentHeight);
+    });
+
+    it('getCellRect reflects batch updates', () => {
+      const engine = new LayoutEngine(makeConfig([100], 5, { rowHeight: 28, headerHeight: 32, rowNumberWidth: 50 }));
+      engine.setRowHeightsBatch(new Map([[0, 56]]));
+
+      const rect = engine.getCellRect(1, 0);
+      expect(rect.y).toBe(32 + 56); // headerHeight + row[0] height
+      expect(rect.height).toBe(28); // row[1] unchanged
+    });
+
+    it('getRowAtY works after batch update', () => {
+      const engine = new LayoutEngine(makeConfig([100], 5, { rowHeight: 28, headerHeight: 0, rowNumberWidth: 0 }));
+      engine.setRowHeightsBatch(new Map([[0, 100]]));
+
+      // Row 0: 0..100, Row 1: 100..128
+      expect(engine.getRowAtY(50)).toBe(0);
+      expect(engine.getRowAtY(99)).toBe(0);
+      expect(engine.getRowAtY(100)).toBe(1);
+    });
+  });
+
+  describe('setColumnWidthsBatch', () => {
+    it('should batch update multiple column widths', () => {
+      const engine = new LayoutEngine({
+        columns: [
+          { key: 'a', title: 'A', width: 100 },
+          { key: 'b', title: 'B', width: 100 },
+          { key: 'c', title: 'C', width: 100 },
+        ],
+        rowCount: 1,
+        rowHeight: 28,
+        headerHeight: 32,
+        rowNumberWidth: 50,
+      });
+
+      const updates = new Map<number, number>();
+      updates.set(0, 200);
+      updates.set(2, 150);
+      engine.setColumnWidthsBatch(updates);
+
+      expect(engine.getColumnWidth(0)).toBe(200);
+      expect(engine.getColumnWidth(1)).toBe(100);
+      expect(engine.getColumnWidth(2)).toBe(150);
+      expect(engine.contentWidth).toBe(450);
+    });
+
+    it('should handle empty updates', () => {
+      const engine = new LayoutEngine({
+        columns: [{ key: 'a', title: 'A', width: 100 }],
+        rowCount: 1,
+        rowHeight: 28,
+        headerHeight: 32,
+        rowNumberWidth: 50,
+      });
+
+      engine.setColumnWidthsBatch(new Map());
+      expect(engine.getColumnWidth(0)).toBe(100);
+    });
+
+    it('should skip out-of-range indices', () => {
+      const engine = new LayoutEngine({
+        columns: [{ key: 'a', title: 'A', width: 100 }],
+        rowCount: 1,
+        rowHeight: 28,
+        headerHeight: 32,
+        rowNumberWidth: 50,
+      });
+
+      const updates = new Map<number, number>();
+      updates.set(5, 200);
+      updates.set(-1, 200);
+      engine.setColumnWidthsBatch(updates);
+      expect(engine.getColumnWidth(0)).toBe(100);
+    });
+
+    it('should produce same result as individual setColumnWidth calls', () => {
+      const makeEngine = () =>
+        new LayoutEngine({
+          columns: [
+            { key: 'a', title: 'A', width: 100 },
+            { key: 'b', title: 'B', width: 100 },
+            { key: 'c', title: 'C', width: 100 },
+          ],
+          rowCount: 1,
+          rowHeight: 28,
+          headerHeight: 32,
+          rowNumberWidth: 50,
+        });
+
+      const e1 = makeEngine();
+      e1.setColumnWidth(0, 150);
+      e1.setColumnWidth(2, 200);
+
+      const e2 = makeEngine();
+      const updates = new Map<number, number>();
+      updates.set(0, 150);
+      updates.set(2, 200);
+      e2.setColumnWidthsBatch(updates);
+
+      for (let i = 0; i < 3; i++) {
+        expect(e2.getColumnWidth(i)).toBe(e1.getColumnWidth(i));
+      }
+      expect(e2.contentWidth).toBe(e1.contentWidth);
+    });
+  });
 });
diff --git a/packages/core/tests/locale.test.ts b/packages/core/tests/locale.test.ts
new file mode 100644
index 0000000..a82603a
--- /dev/null
+++ b/packages/core/tests/locale.test.ts
@@ -0,0 +1,126 @@
+// SPDX-License-Identifier: BUSL-1.1
+// Copyright (c) 2025 witqq contributors
+
+import { describe, it, expect } from 'vitest';
+import { resolveLocale } from '../src/locale/resolve-locale';
+import { enLocale } from '../src/locale/en';
+import { ruLocale } from '../src/locale/ru';
+import type { SpreadsheetLocale } from '../src/locale/locale-types';
+
+describe('Locale system', () => {
+  describe('resolveLocale', () => {
+    it('returns English defaults when no locale provided', () => {
+      const resolved = resolveLocale();
+      expect(resolved).toEqual(enLocale);
+    });
+
+    it('returns English defaults for undefined', () => {
+      const resolved = resolveLocale(undefined);
+      expect(resolved).toEqual(enLocale);
+    });
+
+    it('merges partial locale over English defaults', () => {
+      const partial: SpreadsheetLocale = {
+        contextMenu: { cut: 'Schneiden' },
+      };
+      const resolved = resolveLocale(partial);
+      expect(resolved.contextMenu.cut).toBe('Schneiden');
+      expect(resolved.contextMenu.copy).toBe('Copy'); // English fallback
+      expect(resolved.formatLocale).toBe('en-US'); // English fallback
+    });
+
+    it('overrides formatLocale', () => {
+      const resolved = resolveLocale({ formatLocale: 'de-DE' });
+      expect(resolved.formatLocale).toBe('de-DE');
+    });
+
+    it('merges all categories independently', () => {
+      const partial: SpreadsheetLocale = {
+        datePicker: { today: 'Heute' },
+        filter: { apply: 'Anwenden' },
+        grouping: { sum: 'Summe' },
+        emptyState: { noData: 'Keine Daten' },
+        print: { showingRows: 'Zeige {shown} von {total} Zeilen' },
+        aria: { sortCleared: 'Sortierung gelöscht' },
+      };
+      const resolved = resolveLocale(partial);
+      expect(resolved.datePicker.today).toBe('Heute');
+      expect(resolved.datePicker.ariaLabel).toBe('Date picker'); // fallback
+      expect(resolved.filter.apply).toBe('Anwenden');
+      expect(resolved.filter.clear).toBe('Clear'); // fallback
+      expect(resolved.grouping.sum).toBe('Summe');
+      expect(resolved.emptyState.noData).toBe('Keine Daten');
+      expect(resolved.print.showingRows).toContain('{shown}');
+      expect(resolved.aria.sortCleared).toBe('Sortierung gelöscht');
+    });
+
+    it('resolves full Russian locale without errors', () => {
+      const resolved = resolveLocale(ruLocale);
+      expect(resolved.formatLocale).toBe('ru-RU');
+      expect(resolved.contextMenu.cut).toBe('Вырезать');
+      expect(resolved.datePicker.today).toBe('Сегодня');
+      expect(resolved.filter.apply).toBe('Применить');
+      expect(resolved.grouping.sum).toBe('Сумма');
+      expect(resolved.emptyState.noData).toBe('Нет данных');
+      expect(resolved.print.showingRows).toContain('{shown}');
+      expect(resolved.aria.sortCleared).toBe('Сортировка сброшена');
+    });
+  });
+
+  describe('enLocale completeness', () => {
+    it('has all required categories', () => {
+      expect(enLocale.formatLocale).toBeDefined();
+      expect(enLocale.contextMenu).toBeDefined();
+      expect(enLocale.datePicker).toBeDefined();
+      expect(enLocale.filter).toBeDefined();
+      expect(enLocale.grouping).toBeDefined();
+      expect(enLocale.emptyState).toBeDefined();
+      expect(enLocale.print).toBeDefined();
+      expect(enLocale.aria).toBeDefined();
+    });
+
+    it('has all 8 context menu items', () => {
+      const cm = enLocale.contextMenu;
+      expect(cm.cut).toBeTruthy();
+      expect(cm.copy).toBeTruthy();
+      expect(cm.paste).toBeTruthy();
+      expect(cm.sortAscending).toBeTruthy();
+      expect(cm.sortDescending).toBeTruthy();
+      expect(cm.insertRowAbove).toBeTruthy();
+      expect(cm.insertRowBelow).toBeTruthy();
+      expect(cm.deleteRow).toBeTruthy();
+    });
+
+    it('has 12 month names and 7 week labels', () => {
+      expect(enLocale.datePicker.monthNames).toHaveLength(12);
+      expect(enLocale.datePicker.weekLabels).toHaveLength(7);
+    });
+
+    it('has template placeholders in print and aria strings', () => {
+      expect(enLocale.print.showingRows).toContain('{shown}');
+      expect(enLocale.print.showingRows).toContain('{total}');
+      expect(enLocale.aria.sortedBy).toContain('{columns}');
+      expect(enLocale.aria.filterActive).toContain('{visible}');
+      expect(enLocale.aria.filterActive).toContain('{total}');
+      expect(enLocale.aria.cellAnnouncement).toContain('{column}');
+    });
+  });
+
+  describe('ruLocale completeness', () => {
+    it('has same keys as enLocale', () => {
+      const enKeys = Object.keys(enLocale).sort();
+      const ruKeys = Object.keys(ruLocale).sort();
+      expect(ruKeys).toEqual(enKeys);
+    });
+
+    it('has same number of context menu items', () => {
+      expect(Object.keys(ruLocale.contextMenu)).toHaveLength(
+        Object.keys(enLocale.contextMenu).length,
+      );
+    });
+
+    it('has same number of filter items', () => {
+      expect(Object.keys(ruLocale.filter)).toHaveLength(Object.keys(enLocale.filter).length);
+    });
+  });
+});
diff --git a/packages/core/tests/performance-benchmark.test.ts b/packages/core/tests/performance-benchmark.test.ts
index 0e6e28d..3087bb4 100644
--- a/packages/core/tests/performance-benchmark.test.ts
+++ b/packages/core/tests/performance-benchmark.test.ts
@@ -2,7 +2,7 @@
 import { describe, it, expect } from 'vitest';
 import { LayoutEngine } from '../src/renderer/layout-engine';
 import { CellStore } from '../src/model/cell-store';
-import { measureInitTime, FPSCounter } from '../src/benchmark/performance-benchmark';
+import { measureInitTime, FPSCounter, measureMultiRun, measureThroughput, computeStats, BenchmarkRunner } from '../src/benchmark/performance-benchmark';
 
 describe('Performance: 1M row initialization', () => {
   it('LayoutEngine initializes 1M rows in <500ms', () => {
@@ -148,4 +148,68 @@ describe('Performance: benchmark utilities', () => {
     expect(result.frameCount).toBe(0);
     expect(result.avgFPS).toBe(0);
   });
+
+  it('measureMultiRun returns stats with correct run count', () => {
+    const stats = measureMultiRun(() => {
+      let sum = 0;
+      for (let i = 0; i < 10_000; i++) sum += i;
+    }, 5);
+    expect(stats.runs).toHaveLength(5);
+    expect(stats.meanMs).toBeGreaterThan(0);
+    expect(stats.medianMs).toBeGreaterThan(0);
+    expect(stats.minMs).toBeLessThanOrEqual(stats.medianMs);
+    expect(stats.maxMs).toBeGreaterThanOrEqual(stats.medianMs);
+    expect(stats.cv).toBeGreaterThanOrEqual(0);
+  });
+
+  it('computeStats handles empty array', () => {
+    const stats = computeStats([]);
+    expect(stats.meanMs).toBe(0);
+    expect(stats.medianMs).toBe(0);
+    expect(stats.cv).toBe(0);
+    expect(stats.runs).toHaveLength(0);
+  });
+
+  it('computeStats calculates correct median for odd count', () => {
+    const stats = computeStats([10, 20, 30]);
+    expect(stats.medianMs).toBe(20);
+    expect(stats.meanMs).toBe(20);
+    expect(stats.minMs).toBe(10);
+    expect(stats.maxMs).toBe(30);
+  });
+
+  it('computeStats calculates correct median for even count', () => {
+    const stats = computeStats([10, 20, 30, 40]);
+    expect(stats.medianMs).toBe(25);
+  });
+
+  it('measureThroughput returns ops/sec', () => {
+    const result = measureThroughput(() => {
+      Math.sqrt(42);
+    }, 10_000);
+    expect(result.opsPerSec).toBeGreaterThan(0);
+    expect(result.totalMs).toBeGreaterThan(0);
+  });
+
+  it('BenchmarkRunner collects metrics and outputs JSON', () => {
+    const runner = new BenchmarkRunner();
+    runner.record('test-metric', '1K', {
+      medianMs: 10,
+      meanMs: 11,
+      minMs: 8,
+      maxMs: 15,
+      cv: 0.1,
+      runs: [10, 11, 12],
+    });
+
+    const result = runner.toJSON();
+    expect(result.timestamp).toBeTruthy();
+    expect(result.metrics).toHaveLength(1);
+    expect(result.metrics[0].name).toBe('test-metric');
+    expect(result.metrics[0].dataset).toBe('1K');
+    expect(result.metrics[0].stats.medianMs).toBe(10);
+
+    runner.reset();
+    expect(runner.toJSON().metrics).toHaveLength(0);
+  });
 });
diff --git a/packages/core/tests/row-store.test.ts b/packages/core/tests/row-store.test.ts
index f5f5c3a..05de740 100644
--- a/packages/core/tests/row-store.test.ts
+++ b/packages/core/tests/row-store.test.ts
@@ -22,12 +22,13 @@ describe('RowStore', () => {
     });
   });
 
-  describe('height overrides', () => {
+  describe('height overrides (manual)', () => {
     it('stores and retrieves height override', () => {
       const store = new RowStore();
       store.setHeight(5, 60);
       expect(store.getHeight(5, 32)).toBe(60);
       expect(store.overrideCount).toBe(1);
+      expect(store.manualOverrideCount).toBe(1);
     });
 
     it('non-overridden rows use default', () => {
@@ -59,6 +60,158 @@ describe('RowStore', () => {
       store.clearHeight(99);
       expect(store.version).toBe(v);
     });
+
+    it('isManual returns true for manual overrides', () => {
+      const store = new RowStore();
+      store.setHeight(5, 60);
+      expect(store.isManual(5)).toBe(true);
+      expect(store.isManual(6)).toBe(false);
+    });
+  });
+
+  describe('auto height overrides', () => {
+    it('stores and retrieves auto height', () => {
+      const store = new RowStore();
+      store.setAutoHeight(5, 48);
+      expect(store.getHeight(5, 32)).toBe(48);
+      expect(store.autoOverrideCount).toBe(1);
+      expect(store.isAuto(5)).toBe(true);
+    });
+
+    it('manual override takes priority over auto', () => {
+      const store = new RowStore();
+      store.setAutoHeight(5, 48);
+      store.setHeight(5, 60);
+      expect(store.getHeight(5, 32)).toBe(60);
+    });
+
+    it('manual wins even if set before auto', () => {
+      const store = new RowStore();
+      store.setHeight(5, 60);
+      store.setAutoHeight(5, 48);
+      expect(store.getHeight(5, 32)).toBe(60);
+    });
+
+    it('clearing manual reveals auto height', () => {
+      const store = new RowStore();
+      store.setAutoHeight(5, 48);
+      store.setHeight(5, 60);
+      expect(store.getHeight(5, 32)).toBe(60);
+      store.clearHeight(5);
+      expect(store.getHeight(5, 32)).toBe(48);
+    });
+
+    it('clearAutoHeight removes auto override', () => {
+      const store = new RowStore();
+      store.setAutoHeight(5, 48);
+      store.clearAutoHeight(5);
+      expect(store.getHeight(5, 32)).toBe(32);
+      expect(store.autoOverrideCount).toBe(0);
+    });
+
+    it('clearAllAutoHeights removes all auto overrides', () => {
+      const store = new RowStore();
+      store.setAutoHeight(1, 40);
+      store.setAutoHeight(2, 50);
+      store.setAutoHeight(3, 60);
+      store.clearAllAutoHeights();
+      expect(store.autoOverrideCount).toBe(0);
+      expect(store.getHeight(1, 32)).toBe(32);
+      expect(store.getHeight(2, 32)).toBe(32);
+    });
+
+    it('clearAllAutoHeights is no-op on empty', () => {
+      const store = new RowStore();
+      const v = store.version;
+      store.clearAllAutoHeights();
+      expect(store.version).toBe(v);
+    });
+
+    it('hidden row returns 0 even with auto override', () => {
+      const store = new RowStore();
+      store.setAutoHeight(2, 48);
+      store.hide(2);
+      expect(store.getHeight(2, 32)).toBe(0);
+    });
+
+    it('overrideCount includes both manual and auto', () => {
+      const store = new RowStore();
+      store.setHeight(1, 40);
+      store.setAutoHeight(2, 50);
+      expect(store.overrideCount).toBe(2);
+      expect(store.manualOverrideCount).toBe(1);
+      expect(store.autoOverrideCount).toBe(1);
+    });
+  });
+
+  describe('setAutoHeightsBatch', () => {
+    it('sets multiple auto heights in one call', () => {
+      const store = new RowStore();
+      const updates = new Map([
+        [0, 40],
+        [1, 50],
+        [2, 60],
+      ]);
+      const changed = store.setAutoHeightsBatch(updates, 32);
+      expect(changed.size).toBe(3);
+      expect(store.getHeight(0, 32)).toBe(40);
+      expect(store.getHeight(1, 32)).toBe(50);
+      expect(store.getHeight(2, 32)).toBe(60);
+    });
+
+    it('skips rows with manual overrides', () => {
+      const store = new RowStore();
+      store.setHeight(1, 70);
+      const updates = new Map([
+        [0, 40],
+        [1, 50],
+        [2, 60],
+      ]);
+      const changed = store.setAutoHeightsBatch(updates, 32);
+      expect(changed.has(1)).toBe(false);
+      expect(store.getHeight(1, 32)).toBe(70); // manual wins
+      expect(changed.has(0)).toBe(true);
+      expect(changed.has(2)).toBe(true);
+    });
+
+    it('only reports changed rows', () => {
+      const store = new RowStore();
+      store.setAutoHeight(0, 40);
+      const updates = new Map([
+        [0, 40], // same as existing — not changed
+        [1, 50], // new — changed
+      ]);
+      const changed = store.setAutoHeightsBatch(updates, 32);
+      expect(changed.has(0)).toBe(false);
+      expect(changed.has(1)).toBe(true);
+    });
+
+    it('detects change from default height', () => {
+      const store = new RowStore();
+      const updates = new Map([[5, 32]]); // same as default
+      const changed = store.setAutoHeightsBatch(updates, 32);
+      expect(changed.size).toBe(0);
+    });
+
+    it('increments version only once for batch', () => {
+      const store = new RowStore();
+      const v = store.version;
+      const updates = new Map([
+        [0, 40],
+        [1, 50],
+        [2, 60],
+      ]);
+      store.setAutoHeightsBatch(updates, 32);
+      expect(store.version).toBe(v + 1);
+    });
+
+    it('does not increment version when nothing changes', () => {
+      const store = new RowStore();
+      const v = store.version;
+      const updates = new Map([[0, 32]]); // same as default
+      store.setAutoHeightsBatch(updates, 32);
+      expect(store.version).toBe(v);
+    });
   });
 
   describe('hidden rows', () => {
@@ -132,12 +285,15 @@ describe('RowStore', () => {
     it('removes all overrides and hidden rows', () => {
       const store = new RowStore();
       store.setHeight(0, 50);
-      store.setHeight(1, 60);
+      store.setAutoHeight(1, 60);
       store.hide(2);
       store.clear();
       expect(store.overrideCount).toBe(0);
+      expect(store.manualOverrideCount).toBe(0);
+      expect(store.autoOverrideCount).toBe(0);
       expect(store.hiddenCount).toBe(0);
       expect(store.getHeight(0, 32)).toBe(32);
+      expect(store.getHeight(1, 32)).toBe(32);
       expect(store.isHidden(2)).toBe(false);
     });
 
@@ -160,6 +316,12 @@ describe('RowStore', () => {
       expect(store.version).toBe(1);
     });
 
+    it('increments on setAutoHeight', () => {
+      const store = new RowStore();
+      store.setAutoHeight(0, 50);
+      expect(store.version).toBe(1);
+    });
+
     it('increments on hide', () => {
       const store = new RowStore();
       store.hide(0);
@@ -179,10 +341,17 @@ describe('RowStore', () => {
       store.clearHeight(0);
       expect(store.version).toBe(2);
     });
+
+    it('increments on clearAutoHeight', () => {
+      const store = new RowStore();
+      store.setAutoHeight(0, 50);
+      store.clearAutoHeight(0);
+      expect(store.version).toBe(2);
+    });
   });
 
   describe('shiftRowsUp', () => {
-    it('shifts height overrides above deleted row down by 1', () => {
+    it('shifts manual height overrides above deleted row down by 1', () => {
       const store = new RowStore();
       store.setHeight(2, 40);
       store.setHeight(5, 60);
@@ -199,6 +368,18 @@ describe('RowStore', () => {
       expect(store.getHeight(8, 30)).toBe(30);
     });
 
+    it('shifts auto height overrides above deleted row down by 1', () => {
+      const store = new RowStore();
+      store.setAutoHeight(2, 40);
+      store.setAutoHeight(5, 60);
+
+      store.shiftRowsUp(3);
+
+      expect(store.getHeight(2, 30)).toBe(40);
+      expect(store.getHeight(4, 30)).toBe(60);
+      expect(store.getHeight(5, 30)).toBe(30);
+    });
+
     it('removes height override at deleted row', () => {
       const store = new RowStore();
       store.setHeight(3, 50);
@@ -243,4 +424,21 @@ describe('RowStore', () => {
       expect(store.version).toBeGreaterThan(v);
     });
   });
+
+  describe('height priority resolution', () => {
+    it('resolves: hidden > manual > auto > default', () => {
+      const store = new RowStore();
+      // Default
+      expect(store.getHeight(0, 28)).toBe(28);
+      // Auto
+      store.setAutoHeight(0, 48);
+      expect(store.getHeight(0, 28)).toBe(48);
+      // Manual wins over auto
+      store.setHeight(0, 60);
+      expect(store.getHeight(0, 28)).toBe(60);
+      // Hidden wins over everything
+      store.hide(0);
+      expect(store.getHeight(0, 28)).toBe(0);
+    });
+  });
 });
diff --git a/packages/core/tests/text-measure-cache.test.ts b/packages/core/tests/text-measure-cache.test.ts
index 6feec68..002c81d 100644
--- a/packages/core/tests/text-measure-cache.test.ts
+++ b/packages/core/tests/text-measure-cache.test.ts
@@ -3,6 +3,18 @@ import { TextMeasureCache } from '../src/renderer/text-measure-cache';
 
 function createMockCtx(widthFn?: (text: string) => number) {
   const defaultWidthFn = (text: string) => text.length * 8; // 8px per char
+  return {
+    font: '',
+    measureText: vi.fn().mockImplementation((text: string) => ({
+      width: (widthFn ?? defaultWidthFn)(text),
+      actualBoundingBoxAscent: 10,
+      actualBoundingBoxDescent: 3,
+    })),
+  } as unknown as CanvasRenderingContext2D;
+}
+
+function createMockCtxNoMetrics(widthFn?: (text: string) => number) {
+  const defaultWidthFn = (text: string) => text.length * 8;
   return {
     font: '',
     measureText: vi.fn().mockImplementation((text: string) => ({
@@ -243,7 +255,13 @@ describe('TextMeasureCache', () => {
       const cache = new TextMeasureCache();
       // Simulate variable width: measure actual substring widths
       const charWidths: Record<string, number> = {
-        W: 14, i: 4, d: 8, e: 8, ' ': 4, t: 6, x: 8,
+        W: 14,
+        i: 4,
+        d: 8,
+        e: 8,
+        ' ': 4,
+        t: 6,
+        x: 8,
         '\u2026': 10,
       };
       const ctx = createMockCtx((text) => {
@@ -262,4 +280,191 @@ describe('TextMeasureCache', () => {
       expect(result).toBe('Wid\u2026');
     });
   });
+
+  describe('measureEmHeight', () => {
+    it('uses actualBoundingBoxAscent + actualBoundingBoxDescent when available', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx(); // has ascent=10, descent=3
+      const height = cache.measureEmHeight(ctx, '13px Arial');
+      expect(height).toBe(13); // 10 + 3
+    });
+
+    it('falls back to parsing font size when metrics unavailable', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtxNoMetrics();
+      const height = cache.measureEmHeight(ctx, '16px Monospace');
+      expect(height).toBe(16);
+    });
+
+    it('falls back to 16 when font size cannot be parsed', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtxNoMetrics();
+      const height = cache.measureEmHeight(ctx, 'bold serif');
+      expect(height).toBe(16);
+    });
+
+    it('caches em-height per font', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx();
+      cache.measureEmHeight(ctx, '13px Arial');
+      cache.measureEmHeight(ctx, '13px Arial');
+      // measureText called only once for "Mg"
+      const mgCalls = (ctx.measureText as ReturnType<typeof vi.fn>).mock.calls.filter(
+        (c: string[]) => c[0] === 'Mg',
+      );
+      expect(mgCalls.length).toBe(1);
+    });
+  });
+
+  describe('getWrappedLines', () => {
+    it('returns single line when text fits', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 8);
+      const lines = cache.getWrappedLines(ctx, 'hello', '13px Arial', 100);
+      expect(lines).toEqual(['hello']);
+    });
+
+    it('wraps at word boundaries', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 10);
+      // "hello world" = 110px, maxWidth = 60px
+      // "hello " = 60px fits, "world" starts new line
+      const lines = cache.getWrappedLines(ctx, 'hello world', '13px Arial', 60);
+      expect(lines.length).toBe(2);
+      expect(lines[0]).toContain('hello');
+      expect(lines[1]).toContain('world');
+    });
+
+    it('handles explicit newlines', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 8);
+      const lines = cache.getWrappedLines(ctx, 'line1\nline2\nline3', '13px Arial', 500);
+      expect(lines).toEqual(['line1', 'line2', 'line3']);
+    });
+
+    it('handles empty string', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx();
+      const lines = cache.getWrappedLines(ctx, '', '13px Arial', 100);
+      expect(lines).toEqual(['']);
+    });
+
+    it('uses character-level fallback for single long word', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 10);
+      // "abcdefghij" = 100px, maxWidth = 30px → 3 chars per line
+      const lines = cache.getWrappedLines(ctx, 'abcdefghij', '13px Arial', 30);
+      expect(lines.length).toBeGreaterThan(1);
+      // Each line should be at most 3 chars (30px / 10px)
+      for (const line of lines) {
+        expect(line.length).toBeLessThanOrEqual(3);
+      }
+      // All characters preserved
+      expect(lines.join('')).toBe('abcdefghij');
+    });
+
+    it('handles narrow column (maxWidth very small)', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 10);
+      // maxWidth = 10px → 1 char per line
+      const lines = cache.getWrappedLines(ctx, 'abc', '13px Arial', 10);
+      expect(lines).toEqual(['a', 'b', 'c']);
+    });
+
+    it('handles mixed explicit newlines and wrapping', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 10);
+      // maxWidth = 50px → 5 chars per line
+      const lines = cache.getWrappedLines(ctx, 'hello world\nbye', '13px Arial', 50);
+      expect(lines.length).toBeGreaterThanOrEqual(3); // hello, world, bye
+    });
+
+    it('handles zero maxWidth', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx();
+      const lines = cache.getWrappedLines(ctx, 'hello', '13px Arial', 0);
+      expect(lines).toEqual(['']);
+    });
+
+    it('caches wrapped line results', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 8);
+      const lines1 = cache.getWrappedLines(ctx, 'hello world', '13px Arial', 50);
+      const lines2 = cache.getWrappedLines(ctx, 'hello world', '13px Arial', 50);
+      expect(lines1).toBe(lines2); // same reference (from cache)
+    });
+  });
+
+  describe('countWrappedLines', () => {
+    it('returns 1 for text that fits on one line', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 8);
+      expect(cache.countWrappedLines(ctx, 'hi', '13px Arial', 100)).toBe(1);
+    });
+
+    it('returns correct count for multi-line text', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 10);
+      // "hello world test" → wraps across multiple lines at 50px max
+      const count = cache.countWrappedLines(ctx, 'hello world test', '13px Arial', 50);
+      expect(count).toBeGreaterThan(1);
+    });
+  });
+
+  describe('measureWrappedHeight', () => {
+    it('returns correct height for single line', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx(); // emHeight = 13 (ascent 10 + descent 3)
+      const height = cache.measureWrappedHeight(ctx, 'hello', '13px Arial', 200, 1.2);
+      // 1 line × 13 × 1.2 = 15.6
+      expect(height).toBeCloseTo(15.6, 1);
+    });
+
+    it('returns correct height for multiple lines', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 10); // em = 13
+      // "hello world" with maxWidth 60 → 2 lines
+      const height = cache.measureWrappedHeight(ctx, 'hello world', '13px Arial', 60, 1.2);
+      const lineCount = cache.countWrappedLines(ctx, 'hello world', '13px Arial', 60);
+      expect(height).toBeCloseTo(lineCount * 13 * 1.2, 1);
+    });
+
+    it('includes padding in height', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx();
+      const heightNoPad = cache.measureWrappedHeight(ctx, 'hello', '13px Arial', 200, 1.2);
+      const heightWithPad = cache.measureWrappedHeight(ctx, 'hello', '13px Arial', 200, 1.2, {
+        top: 5,
+        bottom: 5,
+      });
+      expect(heightWithPad).toBe(heightNoPad + 10);
+    });
+
+    it('defaults lineHeight to 1.2', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx();
+      const height = cache.measureWrappedHeight(ctx, 'hello', '13px Arial', 200);
+      expect(height).toBeCloseTo(13 * 1.2, 1);
+    });
+  });
+
+  describe('clear with wrap/em caches', () => {
+    it('clears all caches including wrap and em-height', () => {
+      const cache = new TextMeasureCache();
+      const ctx = createMockCtx((t) => t.length * 8);
+
+      cache.measureText(ctx, 'hello', '13px Arial');
+      cache.measureEmHeight(ctx, '13px Arial');
+      cache.getWrappedLines(ctx, 'hello world', '13px Arial', 50);
+
+      cache.clear();
+      expect(cache.size).toBe(0);
+
+      // After clear, should re-measure
+      const callsBefore = (ctx.measureText as ReturnType<typeof vi.fn>).mock.calls.length;
+      cache.measureEmHeight(ctx, '13px Arial');
+      const callsAfter = (ctx.measureText as ReturnType<typeof vi.fn>).mock.calls.length;
+      expect(callsAfter).toBeGreaterThan(callsBefore);
+    });
+  });
 });
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index 1405dd5..634ca8d 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -2,9 +2,16 @@ import { useRef, useEffect, useCallback, useState } from 'react';
 import { Spreadsheet } from '@witqq/spreadsheet-react';
 import type { SpreadsheetRef } from '@witqq/spreadsheet-react';
 import type { ColumnDef } from '@witqq/spreadsheet';
-import { lightTheme, darkTheme, PivotEngine, StreamingAdapter } from '@witqq/spreadsheet';
+import { lightTheme, darkTheme, PivotEngine, StreamingAdapter, enLocale, ruLocale } from '@witqq/spreadsheet';
 import type { PivotColumnDef, CellEvent, PivotResult } from '@witqq/spreadsheet';
-import { createContextMenuPlugin, FormulaPlugin, ConditionalFormattingPlugin, ExcelPlugin } from '@witqq/spreadsheet-plugins';
+import {
+  createContextMenuPlugin,
+  FormulaPlugin,
+  ConditionalFormattingPlugin,
+  ExcelPlugin,
+  ProgressiveLoaderPlugin,
+} from '@witqq/spreadsheet-plugins';
+import type { ContextMenuItem } from '@witqq/spreadsheet';
 import { CollaborationPlugin } from '../../plugins/src/collaboration/collaboration-plugin';
 import { WebSocketTransport } from '../../plugins/src/collaboration/ws-transport';
 import type { WebSocketTransportConfig } from '../../plugins/src/collaboration/ws-transport';
@@ -24,6 +31,7 @@ const columns: ColumnDef[] = [
   { key: 'phone', title: 'Phone', width: 130 },
   { key: 'startDate', title: 'Start Date', width: 110, type: 'date' },
   { key: 'hireDate', title: 'Hire Date', width: 110, type: 'date' },
+  { key: 'lastLogin', title: 'Last Login', width: 160, type: 'datetime' },
   { key: 'active', title: 'Active', width: 60, type: 'boolean' },
   { key: 'status', title: 'Status', width: 80 },
   { key: 'rating', title: 'Rating', width: 70, type: 'number' },
@@ -32,7 +40,7 @@ const columns: ColumnDef[] = [
   { key: 'office', title: 'Office', width: 80 },
   { key: 'floor', title: 'Floor', width: 60, type: 'number' },
   { key: 'manager', title: 'Manager', width: 120 },
-  { key: 'notes', title: 'Notes', width: 200 },
+  { key: 'notes', title: 'Notes', width: 200, wrapText: true },
   { key: 'budget', title: 'Budget', width: 100, type: 'number' },
   { key: 'overtime', title: 'Overtime', width: 80, type: 'number' },
   { key: 'bonus', title: 'Bonus', width: 90, type: 'number' },
@@ -51,20 +59,71 @@ const columns: ColumnDef[] = [
   { key: 'os', title: 'OS', width: 80 },
   { key: 'monitor', title: 'Monitor Size', width: 100 },
   { key: 'languages', title: 'Languages', width: 120, type: 'number' },
-  { key: 'comments', title: 'Comments', width: 220 },
+  { key: 'comments', title: 'Comments', width: 220, wrapText: true },
 ];
 
-const firstNames = ['Alice', 'Bob', 'Carol', 'David', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
-const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
-const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations', 'Legal', 'Support'];
-const titles = ['Engineer', 'Manager', 'Analyst', 'Designer', 'Coordinator', 'Director', 'Specialist', 'Lead'];
+const firstNames = [
+  'Alice',
+  'Bob',
+  'Carol',
+  'David',
+  'Eve',
+  'Frank',
+  'Grace',
+  'Henry',
+  'Ivy',
+  'Jack',
+];
+const lastNames = [
+  'Smith',
+  'Johnson',
+  'Williams',
+  'Brown',
+  'Jones',
+  'Garcia',
+  'Miller',
+  'Davis',
+  'Rodriguez',
+  'Martinez',
+];
+const departments = [
+  'Engineering',
+  'Marketing',
+  'Sales',
+  'HR',
+  'Finance',
+  'Operations',
+  'Legal',
+  'Support',
+];
+const titles = [
+  'Engineer',
+  'Manager',
+  'Analyst',
+  'Designer',
+  'Coordinator',
+  'Director',
+  'Specialist',
+  'Lead',
+];
 const cities = ['New York', 'London', 'Tokyo', 'Berlin', 'Paris', 'Sydney', 'Toronto', 'Singapore'];
 const countries = ['USA', 'UK', 'Japan', 'Germany', 'France', 'Australia', 'Canada', 'Singapore'];
 const statuses = ['Active', 'On Leave', 'Remote'];
 const teams = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'];
 const offices = ['HQ', 'West', 'East', 'Remote'];
 const regions = ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'];
-const skills = ['TypeScript', 'Python', 'Java', 'Go', 'Rust', 'C++', 'Kotlin', 'Swift', 'Ruby', 'Scala'];
+const skills = [
+  'TypeScript',
+  'Python',
+  'Java',
+  'Go',
+  'Rust',
+  'C++',
+  'Kotlin',
+  'Swift',
+  'Ruby',
+  'Scala',
+];
 const laptops = ['MacBook Pro 16', 'MacBook Pro 14', 'ThinkPad X1', 'Dell XPS 15', 'Surface Pro'];
 const oses = ['macOS', 'Windows', 'Linux'];
 const monitors = ['27"', '32"', '34" UW', '24"', 'Dual 27"'];
@@ -88,6 +147,7 @@ function generateData(count: number): Record<string, unknown>[] {
       active: i % 3 !== 0,
       startDate: `2020-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
       hireDate: `2019-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
+      lastLogin: `2025-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}T${String(8 + (i % 12)).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}`,
       status: statuses[i % statuses.length],
       rating: 1 + (i % 5),
       projects: 1 + (i % 10),
@@ -95,7 +155,7 @@ function generateData(count: number): Record<string, unknown>[] {
       office: offices[i % offices.length],
       floor: 1 + (i % 10),
       manager: `${firstNames[(i + 3) % firstNames.length]} ${lastNames[(i + 5) % lastNames.length]}`,
-      notes: `Employee #${i + 1} - ${departments[i % departments.length]} department`,
+      notes: `Employee #${i + 1} in ${departments[i % departments.length]} department. Key responsibilities include project coordination and team collaboration across ${regions[i % regions.length]} region.`,
       budget: 10000 + (i % 50) * 1000,
       overtime: i % 40,
       bonus: 500 + (i % 30) * 200,
@@ -114,13 +174,13 @@ function generateData(count: number): Record<string, unknown>[] {
       os: oses[i % oses.length],
       monitor: monitors[i % monitors.length],
       languages: 1 + (i % 5),
-      comments: `Review cycle ${(i % 4) + 1}Q - ${statuses[i % statuses.length].toLowerCase()} employee in ${cities[i % cities.length]}`,
+      comments: `Performance review cycle ${(i % 4) + 1}Q — ${statuses[i % statuses.length].toLowerCase()} employee based in ${cities[i % cities.length]}. Rated ${1 + (i % 5)}/5 stars with ${1 + (i % 10)} active projects.`,
     });
   }
   return rows;
 }
 
-const data100K = generateData(100_000);
+const data1K = generateData(1_000);
 
 export default function App() {
   const tableRef = useRef<SpreadsheetRef>(null);
@@ -128,8 +188,9 @@ export default function App() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [excelStatus, setExcelStatus] = useState('');
   const [isDark, setIsDark] = useState(false);
-  const [rowMode, setRowMode] = useState<'100k' | '1m'>('100k');
-  const [data, setData] = useState(data100K);
+  const [isRu, setIsRu] = useState(false);
+  const [rowMode, setRowMode] = useState<'1k' | '1m'>('1k');
+  const [data, setData] = useState(data1K);
   const [groupsEnabled, setGroupsEnabled] = useState(false);
   const [pivotMode, setPivotMode] = useState(false);
   const [pivotColumns, setPivotColumns] = useState<PivotColumnDef[]>([]);
@@ -145,14 +206,26 @@ export default function App() {
   const [streamingCount, setStreamingCount] = useState(0);
   const [collabMode, setCollabMode] = useState(false);
   const [collabStatus, setCollabStatus] = useState('');
-  const collabRef = useRef<{ plugin: CollaborationPlugin; transport: WebSocketTransport; cursorLayer: RemoteCursorLayer } | null>(null);
+  const [stretchMode, setStretchMode] = useState<'none' | 'all' | 'last'>('none');
+  const [autoRowHeightEnabled, setAutoRowHeightEnabled] = useState(true);
+  const [progressiveMode, setProgressiveMode] = useState(false);
+  const [progressPct, setProgressPct] = useState(0);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const collabRef = useRef<{
+    plugin: CollaborationPlugin;
+    transport: WebSocketTransport;
+    cursorLayer: RemoteCursorLayer;
+  } | null>(null);
   const pivotEngineRef = useRef(new PivotEngine());
-  const streamingRef = useRef<{ adapter: StreamingAdapter; interval: ReturnType<typeof setInterval> } | null>(null);
+  const streamingRef = useRef<{
+    adapter: StreamingAdapter;
+    interval: ReturnType<typeof setInterval>;
+  } | null>(null);
 
   // Expose engine for E2E testing — re-run when pivot mode or drill-down changes (key forces remount)
   useEffect(() => {
     const engine = tableRef.current?.getInstance() ?? null;
-    (window as any).__witEngine = engine;
+    (window as unknown as Record<string, unknown>).__witEngine = engine;
 
     // Install cellClick handler for pivot drill-down
     if (pivotMode && !drillDown && engine && pivotResult) {
@@ -161,7 +234,10 @@ export default function App() {
       const handleCellClick = (event: CellEvent) => {
         if (event.col < result.frozenColumns) return;
         const drillRows = pivotEngineRef.current.getDrillDownRows(
-          sourceData, result, event.row, event.col,
+          sourceData,
+          result,
+          event.row,
+          event.col,
         );
         if (drillRows.length === 0) return;
 
@@ -179,7 +255,7 @@ export default function App() {
         setDrillDown({ title, columns, rows: drillRows });
       };
       engine.on('cellClick', handleCellClick);
-      (window as any).__pivotResult = result;
+      (window as unknown as Record<string, unknown>).__pivotResult = result;
       return () => {
         engine.off('cellClick', handleCellClick);
       };
@@ -197,8 +273,58 @@ export default function App() {
         { type: 'range', min: 18, max: 65, message: 'Age must be between 18 and 65' },
       ]);
 
-      // Install context menu plugin
-      engine.installPlugin(createContextMenuPlugin());
+      // Install context menu plugin with submenu demo items
+      const menuItems: ContextMenuItem[] = [
+        {
+          id: 'insert-submenu',
+          label: 'Insert',
+          contexts: ['cell', 'header'],
+          submenu: [
+            { id: 'insert-row-above', label: 'Row Above', contexts: ['cell'], action: () => {} },
+            { id: 'insert-row-below', label: 'Row Below', contexts: ['cell'], action: () => {} },
+            { id: 'insert-col-left', label: 'Column Left', contexts: ['header'], action: () => {} },
+            {
+              id: 'insert-col-right',
+              label: 'Column Right',
+              contexts: ['header'],
+              action: () => {},
+            },
+          ],
+        },
+        {
+          id: 'format-submenu',
+          label: 'Format',
+          contexts: ['cell'],
+          submenu: [
+            {
+              id: 'format-bold',
+              label: 'Bold',
+              shortcut: 'Ctrl+B',
+              contexts: ['cell'],
+              action: () => {},
+            },
+            {
+              id: 'format-italic',
+              label: 'Italic',
+              shortcut: 'Ctrl+I',
+              contexts: ['cell'],
+              action: () => {},
+            },
+            {
+              id: 'format-align',
+              label: 'Alignment',
+              contexts: ['cell'],
+              submenu: [
+                { id: 'align-left', label: 'Left', contexts: ['cell'], action: () => {} },
+                { id: 'align-center', label: 'Center', contexts: ['cell'], action: () => {} },
+                { id: 'align-right', label: 'Right', contexts: ['cell'], action: () => {} },
+              ],
+            },
+          ],
+        },
+        // Copy/Paste/Cut already provided by engine's default context menu items
+      ];
+      engine.installPlugin(createContextMenuPlugin(menuItems));
 
       // Install formula plugin
       engine.installPlugin(new FormulaPlugin());
@@ -249,12 +375,12 @@ export default function App() {
       const excelPlugin = new ExcelPlugin();
       engine.installPlugin(excelPlugin);
       excelPluginRef.current = excelPlugin;
-      (window as any).__excelPlugin = excelPlugin;
+      (window as unknown as Record<string, unknown>).__excelPlugin = excelPlugin;
 
       // Demo: merge a 2×3 region (rows 3-4, cols 2-4) with explicit value
       engine.mergeCells({ startRow: 3, startCol: 2, endRow: 4, endCol: 4 }, 'Merged Cell');
     }
-  }, [pivotMode, drillDown]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [pivotMode, drillDown]);
 
   const handleImport = useCallback(() => {
     fileInputRef.current?.click();
@@ -268,7 +394,9 @@ export default function App() {
       setExcelStatus('Importing...');
       const buffer = await file.arrayBuffer();
       const result = await excelPluginRef.current.importExcel(buffer);
-      setExcelStatus(`Imported "${result.sheetName}": ${result.rowCount} rows, ${result.columns.length} cols`);
+      setExcelStatus(
+        `Imported "${result.sheetName}": ${result.rowCount} rows, ${result.columns.length} cols`,
+      );
     } catch (err) {
       setExcelStatus(`Import error: ${err instanceof Error ? err.message : String(err)}`);
     }
@@ -282,8 +410,13 @@ export default function App() {
 
     try {
       setExcelStatus('Exporting...');
-      const buffer = await excelPluginRef.current.exportExcel({ sheetName: 'Spreadsheet Export', maxRows: 10000 });
-      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const buffer = await excelPluginRef.current.exportExcel({
+        sheetName: 'Spreadsheet Export',
+        maxRows: 10000,
+      });
+      const blob = new Blob([buffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
@@ -300,14 +433,24 @@ export default function App() {
     setIsDark((prev) => !prev);
   }, []);
 
+  const handleToggleLocale = useCallback(() => {
+    setIsRu((prev) => {
+      const next = !prev;
+      const engine = tableRef.current?.getInstance();
+      if (engine) {
+        engine.setLocale(next ? ruLocale : enLocale);
+      }
+      return next;
+    });
+  }, []);
+
   const handleToggleRows = useCallback(() => {
-    const next = rowMode === '100k' ? '1m' : '100k';
+    const next = rowMode === '1k' ? '1m' : '1k';
     setRowMode(next);
 
     if (next === '1m') {
       // For 1M mode: set row count to 1M but only populate first 1000 rows
       // This tests LayoutEngine, viewport, and scroll at 1M scale
-      // without consuming GB of memory for cell data
       const engine = tableRef.current?.getInstance();
       if (engine) {
         const start = performance.now();
@@ -316,11 +459,11 @@ export default function App() {
         setExcelStatus(`Loaded 1M rows in ${elapsed.toFixed(0)}ms`);
       }
     } else {
-      // Back to 100K: restore full data
+      // Back to 1K: restore data
       const start = performance.now();
-      setData(data100K);
+      setData(data1K);
       const elapsed = performance.now() - start;
-      setExcelStatus(`Loaded 100K rows in ${elapsed.toFixed(0)}ms`);
+      setExcelStatus(`Loaded 1K rows in ${elapsed.toFixed(0)}ms`);
     }
   }, [rowMode]);
 
@@ -401,7 +544,7 @@ export default function App() {
         columnKeys: columns.map((c) => c.key),
         throttleMs: 100,
       });
-      (window as any).__streamingAdapter = adapter;
+      (window as unknown as Record<string, unknown>).__streamingAdapter = adapter;
       let counter = 0;
       const interval = setInterval(() => {
         const batch: Record<string, unknown>[] = [];
@@ -422,6 +565,7 @@ export default function App() {
             active: i % 3 !== 0,
             startDate: `2025-01-${String((i % 28) + 1).padStart(2, '0')}`,
             hireDate: `2024-06-${String((i % 28) + 1).padStart(2, '0')}`,
+            lastLogin: `2025-06-${String((i % 28) + 1).padStart(2, '0')}T${String(9 + (i % 10)).padStart(2, '0')}:${String((i * 3) % 60).padStart(2, '0')}`,
             status: statuses[i % statuses.length],
             rating: 1 + (i % 5),
             projects: 1 + (i % 10),
@@ -547,61 +691,191 @@ export default function App() {
     }
   }, [collabMode]);
 
+  const handleProgressiveLoad = useCallback(() => {
+    const engine = tableRef.current?.getInstance();
+    if (!engine || progressiveMode) return;
+
+    setProgressiveMode(true);
+    setProgressPct(0);
+
+    const loader = new ProgressiveLoaderPlugin({
+      totalRows: 50_000,
+      columnKeys: columns.map((c) => c.key),
+      generateRow: (i: number) => ({
+        id: i + 1,
+        firstName: firstNames[i % firstNames.length],
+        lastName: lastNames[i % lastNames.length],
+        email: `prog.${i}@example.com`,
+        age: 22 + (i % 40),
+        salary: 40000 + (i % 20) * 5000,
+        department: departments[i % departments.length],
+        title: titles[i % titles.length],
+        city: cities[i % cities.length],
+        country: countries[i % countries.length],
+        phone: `+1-555-${String(5000 + i).padStart(4, '0')}`,
+        active: i % 3 !== 0,
+        startDate: `2022-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
+        hireDate: `2021-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
+        lastLogin: `2025-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}T${String(7 + (i % 14)).padStart(2, '0')}:${String((i * 11) % 60).padStart(2, '0')}`,
+        status: statuses[i % statuses.length],
+        rating: 1 + (i % 5),
+        projects: 1 + (i % 10),
+        team: teams[i % teams.length],
+        office: offices[i % offices.length],
+        floor: 1 + (i % 10),
+        manager: `${firstNames[(i + 3) % firstNames.length]} ${lastNames[(i + 5) % lastNames.length]}`,
+        notes: `Progressive load row #${i + 1} — ${departments[i % departments.length]} dept with extended description for text wrapping demo.`,
+        budget: 10000 + (i % 50) * 1000,
+        overtime: i % 40,
+        bonus: 500 + (i % 30) * 200,
+        region: regions[i % regions.length],
+        skill1: skills[i % skills.length],
+        skill2: skills[(i + 4) % skills.length],
+        certifications: i % 8,
+        satisfaction: 1 + (i % 10),
+        tenure: (i % 20) + 1,
+        lastReview: `2025-03-15`,
+        nextReview: `2026-03-15`,
+        mentor: `${firstNames[(i + 7) % firstNames.length]} ${lastNames[(i + 2) % lastNames.length]}`,
+        building: buildings[i % buildings.length],
+        parking: `P-${100 + (i % 200)}`,
+        laptop: laptops[i % laptops.length],
+        os: oses[i % oses.length],
+        monitor: monitors[i % monitors.length],
+        languages: 1 + (i % 5),
+        comments: `Batch loaded employee ${i + 1}. Performance tracked across ${(i % 4) + 1} quarters.`,
+      }),
+      onProgress: (loaded, total) => {
+        setProgressPct(Math.round((loaded / total) * 100));
+      },
+      onComplete: (loadTimeMs) => {
+        setExcelStatus(`Progressive load: 50K rows in ${loadTimeMs.toFixed(0)}ms`);
+        setProgressiveMode(false);
+      },
+    });
+    engine.installPlugin(loader);
+    loader.start();
+  }, [progressiveMode]);
+
+  const handleCycleStretch = useCallback(() => {
+    const modes: Array<'none' | 'all' | 'last'> = ['none', 'all', 'last'];
+    setStretchMode((prev) => {
+      const idx = modes.indexOf(prev);
+      return modes[(idx + 1) % modes.length];
+    });
+  }, []);
+
+  const bg = isDark ? '#1a1a2e' : '#f8f9fa';
+  const cardBg = isDark ? '#16213e' : '#ffffff';
+  const borderColor = isDark ? '#2a2a4a' : '#e0e0e0';
+  const accentColor = '#4361ee';
+  const textMuted = isDark ? '#8888aa' : '#6c757d';
+  const sectionTitle = {
+    fontSize: 11,
+    fontWeight: 700 as const,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+    color: textMuted,
+    margin: '0 0 8px 0',
+  };
+  const btnBase = {
+    padding: '6px 12px',
+    cursor: 'pointer',
+    border: `1px solid ${borderColor}`,
+    borderRadius: 6,
+    fontSize: 13,
+    backgroundColor: cardBg,
+    color: isDark ? '#d4d4d4' : '#1f1f1f',
+    transition: 'background-color 0.15s',
+  };
+  const btnActive = {
+    ...btnBase,
+    backgroundColor: accentColor,
+    color: '#fff',
+    borderColor: accentColor,
+  };
+  const badge = (text: string, color: string) => (
+    <span
+      style={{
+        fontSize: 11,
+        padding: '2px 8px',
+        borderRadius: 10,
+        backgroundColor: color + '22',
+        color,
+        fontWeight: 600,
+      }}
+    >
+      {text}
+    </span>
+  );
+
   return (
-    <div style={{
-      padding: 16, height: '100vh', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', overflow: 'hidden',
-      backgroundColor: isDark ? '#1e1e1e' : '#ffffff', color: isDark ? '#d4d4d4' : '#1f1f1f',
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 12px 0', flexShrink: 0 }}>
-        <h1 style={{ margin: 0, fontSize: 20 }}>witqq spreadsheet demo</h1>
-        <button onClick={handleToggleTheme} data-testid="theme-toggle" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          {isDark ? '☀️ Light' : '🌙 Dark'}
-        </button>
-        <button onClick={handleToggleRows} data-testid="row-toggle" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          {rowMode === '100k' ? '📊 1M Rows' : '📊 100K Rows'}
-        </button>
-        <button onClick={handleImport} data-testid="import-btn" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          📥 Import Excel
-        </button>
-        <button onClick={handleExport} data-testid="export-btn" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          📤 Export Excel
-        </button>
-        <button onClick={handlePrint} data-testid="print-btn" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          🖨️ Print
+    <div
+      style={{
+        height: '100vh',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        backgroundColor: bg,
+        color: isDark ? '#d4d4d4' : '#1f1f1f',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: '12px 20px',
+          borderBottom: `1px solid ${borderColor}`,
+          backgroundColor: cardBg,
+          flexShrink: 0,
+        }}
+      >
+        <button
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          style={{ ...btnBase, padding: '4px 8px', fontSize: 16, lineHeight: 1 }}
+        >
+          ☰
         </button>
-        <button onClick={handleToggleGroups} data-testid="group-toggle" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          {groupsEnabled ? '📂 Clear Groups' : '📁 Group Rows'}
-        </button>
-        <button onClick={handleTogglePivot} data-testid="pivot-toggle" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          {pivotMode ? '📋 Table View' : '📊 Pivot'}
-        </button>
-        <button onClick={handleToggleStreaming} data-testid="streaming-toggle" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          {streaming ? '⏹ Stop Stream' : '📡 Stream'}
-        </button>
-        <button onClick={handleToggleCollab} data-testid="collab-toggle" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-          {collabMode ? '🔴 Disconnect' : '👥 Collaborate'}
-        </button>
-        {streaming && (
-          <span data-testid="streaming-count" style={{ fontSize: 13, fontWeight: 'bold' }}>
-            +{streamingCount} rows
-          </span>
-        )}
-        {collabStatus && (
-          <span data-testid="collab-status" style={{ fontSize: 13, color: collabMode ? '#2ecc71' : '#e74c3c' }}>
-            {collabStatus}
-          </span>
-        )}
+        <h1
+          style={{
+            margin: 0,
+            fontSize: 18,
+            fontWeight: 700,
+            background: 'linear-gradient(135deg, #4361ee, #7209b7)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          witqq spreadsheet
+        </h1>
+        <span style={{ fontSize: 12, color: textMuted }}>Interactive Demo</span>
+        <div style={{ flex: 1 }} />
+        {streaming && badge(`+${streamingCount} rows`, '#2ecc71')}
+        {progressiveMode && badge(`Loading ${progressPct}%`, accentColor)}
+        {collabStatus && badge(collabStatus, collabMode ? '#2ecc71' : '#e74c3c')}
         {drillDown && (
-          <button onClick={() => setDrillDown(null)} data-testid="drill-down-back" style={{ padding: '4px 12px', cursor: 'pointer' }}>
-            ← Back to Pivot
-          </button>
+          <>
+            <button
+              onClick={() => setDrillDown(null)}
+              data-testid="drill-down-back"
+              style={btnBase}
+            >
+              ← Back to Pivot
+            </button>
+            <span data-testid="drill-down-title" style={{ fontSize: 13, fontWeight: 600 }}>
+              {drillDown.title} ({drillDown.rows.length} rows)
+            </span>
+          </>
         )}
-        {drillDown && (
-          <span data-testid="drill-down-title" style={{ fontSize: 13, fontWeight: 'bold' }}>
-            {drillDown.title} ({drillDown.rows.length} rows)
+        {excelStatus && (
+          <span data-testid="excel-status" style={{ fontSize: 12, color: textMuted }}>
+            {excelStatus}
           </span>
         )}
-        {excelStatus && <span data-testid="excel-status" style={{ fontSize: 13, color: '#666' }}>{excelStatus}</span>}
         <input
           ref={fileInputRef}
           type="file"
@@ -611,16 +885,180 @@ export default function App() {
           data-testid="file-input"
         />
       </div>
-      <Spreadsheet
-        key={drillDown ? 'drilldown' : pivotMode ? 'pivot' : 'table'}
-        ref={tableRef}
-        columns={(drillDown ? drillDown.columns : pivotMode ? pivotColumns : columns) as ColumnDef[]}
-        data={drillDown ? drillDown.rows : pivotMode ? pivotData : data}
-        theme={isDark ? darkTheme : lightTheme}
-        frozenRows={drillDown ? 1 : pivotMode ? 1 : 2}
-        frozenColumns={drillDown ? 0 : pivotMode ? pivotFrozen : 1}
-        style={{ width: '100%', flex: 1, minHeight: 0 }}
-      />
+
+      {/* Main content area */}
+      <div style={{ display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }}>
+        {/* Sidebar */}
+        {sidebarOpen && (
+          <div
+            style={{
+              width: 240,
+              flexShrink: 0,
+              borderRight: `1px solid ${borderColor}`,
+              backgroundColor: cardBg,
+              overflowY: 'auto',
+              padding: '16px 12px',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 20,
+            }}
+          >
+            {/* Display */}
+            <div>
+              <p style={sectionTitle}>Display</p>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <button onClick={handleToggleTheme} data-testid="theme-toggle" style={btnBase}>
+                  {isDark ? '☀️ Light Theme' : '🌙 Dark Theme'}
+                </button>
+                <button onClick={handleToggleLocale} data-testid="locale-toggle" style={isRu ? btnActive : btnBase}>
+                  {isRu ? '🇷🇺 Русский' : '🇬🇧 English'}
+                </button>
+                <button
+                  onClick={handleCycleStretch}
+                  data-testid="stretch-toggle"
+                  style={stretchMode !== 'none' ? btnActive : btnBase}
+                >
+                  ↔ Stretch: {stretchMode}
+                </button>
+                <button
+                  onClick={() => setAutoRowHeightEnabled(!autoRowHeightEnabled)}
+                  data-testid="autoheight-toggle"
+                  style={autoRowHeightEnabled ? btnActive : btnBase}
+                >
+                  ↕ Auto Row Height: {autoRowHeightEnabled ? 'ON' : 'OFF'}
+                </button>
+              </div>
+            </div>
+
+            {/* Data */}
+            <div>
+              <p style={sectionTitle}>Data</p>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <button onClick={handleToggleRows} data-testid="row-toggle" style={btnBase}>
+                  📊 {rowMode === '1k' ? '→ 1M Rows' : '→ 1K Rows'}
+                </button>
+                <button
+                  onClick={handleProgressiveLoad}
+                  data-testid="progressive-toggle"
+                  style={progressiveMode ? btnActive : btnBase}
+                  disabled={progressiveMode}
+                >
+                  ⏳ Progressive Load 50K
+                </button>
+                <button
+                  onClick={handleToggleStreaming}
+                  data-testid="streaming-toggle"
+                  style={streaming ? btnActive : btnBase}
+                >
+                  {streaming ? '⏹ Stop Stream' : '📡 Stream 1K/sec'}
+                </button>
+              </div>
+            </div>
+
+            {/* Views */}
+            <div>
+              <p style={sectionTitle}>Views</p>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <button
+                  onClick={handleToggleGroups}
+                  data-testid="group-toggle"
+                  style={groupsEnabled ? btnActive : btnBase}
+                >
+                  {groupsEnabled ? '📂 Clear Groups' : '📁 Row Grouping'}
+                </button>
+                <button
+                  onClick={handleTogglePivot}
+                  data-testid="pivot-toggle"
+                  style={pivotMode ? btnActive : btnBase}
+                >
+                  {pivotMode ? '📋 Table View' : '📊 Pivot Table'}
+                </button>
+              </div>
+            </div>
+
+            {/* I/O */}
+            <div>
+              <p style={sectionTitle}>Import / Export</p>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <button onClick={handleImport} data-testid="import-btn" style={btnBase}>
+                  📥 Import Excel
+                </button>
+                <button onClick={handleExport} data-testid="export-btn" style={btnBase}>
+                  📤 Export Excel
+                </button>
+                <button onClick={handlePrint} data-testid="print-btn" style={btnBase}>
+                  🖨️ Print
+                </button>
+              </div>
+            </div>
+
+            {/* Collaboration */}
+            <div>
+              <p style={sectionTitle}>Collaboration</p>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <button
+                  onClick={handleToggleCollab}
+                  data-testid="collab-toggle"
+                  style={collabMode ? btnActive : btnBase}
+                >
+                  {collabMode ? '🔴 Disconnect' : '👥 Real-time Collab'}
+                </button>
+              </div>
+            </div>
+
+            {/* Features info */}
+            <div
+              style={{ marginTop: 'auto', paddingTop: 12, borderTop: `1px solid ${borderColor}` }}
+            >
+              <p style={sectionTitle}>Active Features</p>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                {badge('Formulas', '#4361ee')}
+                {badge('Context Menu', '#7209b7')}
+                {badge('Submenus', '#7209b7')}
+                {badge('Cond. Format', '#f72585')}
+                {badge('Cell Validation', '#e67e22')}
+                {badge('Merged Cells', '#3a86a7')}
+                {badge('Frozen Panes', '#2d6a4f')}
+                {badge('Date Picker', '#d63384')}
+                {badge('Text Wrap', '#0077b6')}
+                {autoRowHeightEnabled && badge('Auto Height', '#0096c7')}
+                {stretchMode !== 'none' && badge(`Stretch: ${stretchMode}`, '#4895ef')}
+              </div>
+              <p style={{ fontSize: 11, color: textMuted, margin: '8px 0 0 0' }}>
+                Right-click cells to see context menu with submenus. Double-click date columns to
+                open date picker, or datetime columns for the combined date+time picker.
+                Notes &amp; Comments columns have text wrapping enabled.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Spreadsheet */}
+        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+          <Spreadsheet
+            key={
+              drillDown
+                ? 'drilldown'
+                : pivotMode
+                  ? 'pivot'
+                  : `table-${stretchMode}-${autoRowHeightEnabled}`
+            }
+            ref={tableRef}
+            columns={
+              (drillDown ? drillDown.columns : pivotMode ? pivotColumns : columns) as ColumnDef[]
+            }
+            data={drillDown ? drillDown.rows : pivotMode ? pivotData : data}
+            theme={isDark ? darkTheme : lightTheme}
+            locale={isRu ? ruLocale : enLocale}
+            frozenRows={drillDown ? 1 : pivotMode ? 1 : 2}
+            frozenColumns={drillDown ? 0 : pivotMode ? pivotFrozen : 1}
+            editable
+            stretchColumns={stretchMode === 'none' ? undefined : stretchMode}
+            autoRowHeight={autoRowHeightEnabled}
+            style={{ width: '100%', flex: 1, minHeight: 0 }}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/packages/demo/src/visual-tests/index.ts b/packages/demo/src/visual-tests/index.ts
index 04e9820..dd69c8d 100644
--- a/packages/demo/src/visual-tests/index.ts
+++ b/packages/demo/src/visual-tests/index.ts
@@ -50,11 +50,23 @@ export interface Scenario {
 }
 
 export const scenarios: Scenario[] = [
-  { id: 'basic-default', description: 'Default table (7 columns, 50 rows)', component: BasicDefault },
+  {
+    id: 'basic-default',
+    description: 'Default table (7 columns, 50 rows)',
+    component: BasicDefault,
+  },
   { id: 'basic-empty', description: 'Empty table (0 data rows)', component: BasicEmpty },
   { id: 'basic-single-row', description: 'Single data row', component: BasicSingleRow },
-  { id: 'basic-large-dataset', description: 'Large dataset (1000 rows)', component: BasicLargeDataset },
-  { id: 'columns-narrow', description: 'Very narrow columns (40px each)', component: ColumnsNarrow },
+  {
+    id: 'basic-large-dataset',
+    description: 'Large dataset (1000 rows)',
+    component: BasicLargeDataset,
+  },
+  {
+    id: 'columns-narrow',
+    description: 'Very narrow columns (40px each)',
+    component: ColumnsNarrow,
+  },
   { id: 'columns-wide', description: 'Very wide columns (400px each)', component: ColumnsWide },
   { id: 'columns-mixed', description: 'Mixed narrow and wide columns', component: ColumnsMixed },
   { id: 'cell-types-all', description: 'All built-in cell types', component: CellTypesAll },
@@ -68,29 +80,85 @@ export const scenarios: Scenario[] = [
   { id: 'no-row-numbers', description: 'Row numbers hidden', component: NoRowNumbers },
   { id: 'custom-row-height', description: 'Non-default row heights', component: CustomRowHeight },
   { id: 'many-columns', description: '30+ columns in view', component: ManyColumns },
-  { id: 'merged-cells', description: 'Several merged regions of different sizes', component: MergedCells },
-  { id: 'sorted-filtered', description: 'Sorted ascending with active filter', component: SortedFiltered },
+  {
+    id: 'merged-cells',
+    description: 'Several merged regions of different sizes',
+    component: MergedCells,
+  },
+  {
+    id: 'sorted-filtered',
+    description: 'Sorted ascending with active filter',
+    component: SortedFiltered,
+  },
   { id: 'selections', description: 'Range selection (rows 2-5, cols 1-3)', component: Selections },
-  { id: 'scroll-states', description: 'Scrolled right and down (partial columns)', component: ScrollStates },
-  { id: 'validation-errors', description: 'Cells with validation errors visible', component: ValidationErrors },
-  { id: 'demo-frozen-panes', description: 'Demo: frozen rows and columns', component: DemoFrozenPanes },
+  {
+    id: 'scroll-states',
+    description: 'Scrolled right and down (partial columns)',
+    component: ScrollStates,
+  },
+  {
+    id: 'validation-errors',
+    description: 'Cells with validation errors visible',
+    component: ValidationErrors,
+  },
+  {
+    id: 'demo-frozen-panes',
+    description: 'Demo: frozen rows and columns',
+    component: DemoFrozenPanes,
+  },
   { id: 'demo-merging', description: 'Demo: merged cell regions', component: DemoMerging },
-  { id: 'demo-clipboard', description: 'Demo: editable table for clipboard', component: DemoClipboard },
-  { id: 'demo-undo-redo', description: 'Demo: editable table with undo/redo', component: DemoUndoRedo },
-  { id: 'demo-resize', description: 'Demo: resizable columns with constraints', component: DemoResize },
+  {
+    id: 'demo-clipboard',
+    description: 'Demo: editable table for clipboard',
+    component: DemoClipboard,
+  },
+  {
+    id: 'demo-undo-redo',
+    description: 'Demo: editable table with undo/redo',
+    component: DemoUndoRedo,
+  },
+  {
+    id: 'demo-resize',
+    description: 'Demo: resizable columns with constraints',
+    component: DemoResize,
+  },
   { id: 'demo-autofill', description: 'Demo: autofill sequences', component: DemoAutofill },
-  { id: 'demo-change-tracking', description: 'Demo: cell status indicators', component: DemoChangeTracking },
-  { id: 'demo-validation', description: 'Demo: validation rules and errors', component: DemoValidation },
+  {
+    id: 'demo-change-tracking',
+    description: 'Demo: cell status indicators',
+    component: DemoChangeTracking,
+  },
+  {
+    id: 'demo-validation',
+    description: 'Demo: validation rules and errors',
+    component: DemoValidation,
+  },
   { id: 'demo-context-menu', description: 'Demo: context menu table', component: DemoContextMenu },
   { id: 'demo-theme-switcher', description: 'Demo: dark theme', component: DemoThemeSwitcher },
   { id: 'demo-accessibility', description: 'Demo: accessible table', component: DemoAccessibility },
   { id: 'demo-print', description: 'Demo: print-ready table', component: DemoPrint },
-  { id: 'demo-cell-types', description: 'Demo: custom cell type renderers', component: DemoCellTypes },
-  { id: 'demo-row-grouping', description: 'Demo: grouped rows with aggregates', component: DemoRowGrouping },
+  {
+    id: 'demo-cell-types',
+    description: 'Demo: custom cell type renderers',
+    component: DemoCellTypes,
+  },
+  {
+    id: 'demo-row-grouping',
+    description: 'Demo: grouped rows with aggregates',
+    component: DemoRowGrouping,
+  },
   { id: 'demo-formula', description: 'Demo: formula plugin (A+B, A×B)', component: DemoFormula },
-  { id: 'demo-conditional-format', description: 'Demo: conditional formatting gradient', component: DemoConditionalFormat },
+  {
+    id: 'demo-conditional-format',
+    description: 'Demo: conditional formatting gradient',
+    component: DemoConditionalFormat,
+  },
   { id: 'demo-excel', description: 'Demo: Excel-exportable table', component: DemoExcel },
   { id: 'demo-event-bus', description: 'Demo: event bus table', component: DemoEventBus },
-  { id: 'demo-plugin-showcase', description: 'Demo: plugin showcase table', component: DemoPluginShowcase },
+  {
+    id: 'demo-plugin-showcase',
+    description: 'Demo: plugin showcase table',
+    component: DemoPluginShowcase,
+  },
   { id: 'demo-hero', description: 'Demo: hero business data table', component: DemoHero },
 ];
diff --git a/packages/demo/src/visual-tests/scenarios/cell-types-all.tsx b/packages/demo/src/visual-tests/scenarios/cell-types-all.tsx
index d3ee9bc..3cd6934 100644
--- a/packages/demo/src/visual-tests/scenarios/cell-types-all.tsx
+++ b/packages/demo/src/visual-tests/scenarios/cell-types-all.tsx
@@ -14,10 +14,31 @@ const columns: ColumnDef[] = [
 const data: Record<string, unknown>[] = [
   { id: 1, text: 'Hello World', number: 42, boolean: true, date: '2024-01-15', currency: 1234.56 },
   { id: 2, text: 'Test Data', number: -17, boolean: false, date: '2024-06-30', currency: 99999 },
-  { id: 3, text: 'Lorem ipsum dolor', number: 0, boolean: true, date: '2023-12-01', currency: 0.99 },
+  {
+    id: 3,
+    text: 'Lorem ipsum dolor',
+    number: 0,
+    boolean: true,
+    date: '2023-12-01',
+    currency: 0.99,
+  },
   { id: 4, text: '', number: 3.14, boolean: false, date: '2025-03-01', currency: -500 },
-  { id: 5, text: 'Special <>&"chars', number: 999999, boolean: true, date: '2020-01-01', currency: 42.00 },
-  { id: 6, text: '日本語テスト', number: 100, boolean: false, date: '2024-07-04', currency: 1000000 },
+  {
+    id: 5,
+    text: 'Special <>&"chars',
+    number: 999999,
+    boolean: true,
+    date: '2020-01-01',
+    currency: 42.0,
+  },
+  {
+    id: 6,
+    text: '日本語テスト',
+    number: 100,
+    boolean: false,
+    date: '2024-07-04',
+    currency: 1000000,
+  },
   { id: 7, text: 'UPPERCASE TEXT', number: -999, boolean: true, date: '2024-02-29', currency: 0 },
   { id: 8, text: 'Mixed 123 CaSe!', number: 1, boolean: false, date: '2024-11-15', currency: 50.5 },
 ];
diff --git a/packages/demo/src/visual-tests/scenarios/custom-row-height.tsx b/packages/demo/src/visual-tests/scenarios/custom-row-height.tsx
index 10c14c4..a38bb89 100644
--- a/packages/demo/src/visual-tests/scenarios/custom-row-height.tsx
+++ b/packages/demo/src/visual-tests/scenarios/custom-row-height.tsx
@@ -6,7 +6,13 @@ const data = generateRows(30);
 export function CustomRowHeight() {
   return (
     <ScenarioContainer width={800} height={500}>
-      <Spreadsheet columns={standardColumns} data={data} rowHeight={40} headerHeight={48} style={tableStyle} />
+      <Spreadsheet
+        columns={standardColumns}
+        data={data}
+        rowHeight={40}
+        headerHeight={48}
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/demo-change-tracking.tsx b/packages/demo/src/visual-tests/scenarios/demo-change-tracking.tsx
index 794abea..600324b 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-change-tracking.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-change-tracking.tsx
@@ -33,7 +33,14 @@ export function DemoChangeTracking() {
   }, []);
   return (
     <ScenarioContainer width={480} height={250}>
-      <Spreadsheet ref={ref} columns={columns} data={data} editable showRowNumbers style={tableStyle} />
+      <Spreadsheet
+        ref={ref}
+        columns={columns}
+        data={data}
+        editable
+        showRowNumbers
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/demo-clipboard.tsx b/packages/demo/src/visual-tests/scenarios/demo-clipboard.tsx
index c8ea867..3639f4b 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-clipboard.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-clipboard.tsx
@@ -10,10 +10,10 @@ const columns: ColumnDef[] = [
 ];
 const data = [
   { item: 'Widget A', qty: 10, price: 9.99, note: 'In stock' },
-  { item: 'Widget B', qty: 5, price: 14.50, note: 'Low stock' },
+  { item: 'Widget B', qty: 5, price: 14.5, note: 'Low stock' },
   { item: 'Gadget C', qty: 0, price: 29.99, note: 'Out of stock' },
   { item: 'Gadget D', qty: 25, price: 7.25, note: 'Bulk order' },
-  { item: 'Part E', qty: 100, price: 1.50, note: 'Standard' },
+  { item: 'Part E', qty: 100, price: 1.5, note: 'Standard' },
 ];
 
 export function DemoClipboard() {
diff --git a/packages/demo/src/visual-tests/scenarios/demo-formula.tsx b/packages/demo/src/visual-tests/scenarios/demo-formula.tsx
index 6d4a8e9..ed31265 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-formula.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-formula.tsx
@@ -30,12 +30,20 @@ export function DemoFormula() {
     engine.installPlugin(plugin);
     for (let row = 0; row < data.length; row++) {
       const r = row + 1;
-      const formulas: [number, string][] = [[2, `=A${r}+B${r}`], [3, `=A${r}*B${r}`]];
+      const formulas: [number, string][] = [
+        [2, `=A${r}+B${r}`],
+        [3, `=A${r}*B${r}`],
+      ];
       for (const [col, formula] of formulas) {
         engine.setCell(row, col, formula);
         engine.getEventBus().emit('cellChange', {
-          row, col, value: formula,
-          column: columns[col], oldValue: '', newValue: formula, source: 'edit' as const,
+          row,
+          col,
+          value: formula,
+          column: columns[col],
+          oldValue: '',
+          newValue: formula,
+          source: 'edit' as const,
         });
       }
     }
diff --git a/packages/demo/src/visual-tests/scenarios/demo-frozen-panes.tsx b/packages/demo/src/visual-tests/scenarios/demo-frozen-panes.tsx
index e08bfde..92db966 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-frozen-panes.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-frozen-panes.tsx
@@ -16,7 +16,14 @@ const data = generateRows(50);
 export function DemoFrozenPanes() {
   return (
     <ScenarioContainer width={500} height={350}>
-      <Spreadsheet columns={columns} data={data} frozenRows={1} frozenColumns={2} showRowNumbers style={tableStyle} />
+      <Spreadsheet
+        columns={columns}
+        data={data}
+        frozenRows={1}
+        frozenColumns={2}
+        showRowNumbers
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/demo-hero.tsx b/packages/demo/src/visual-tests/scenarios/demo-hero.tsx
index 9393ec3..f741fe0 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-hero.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-hero.tsx
@@ -11,12 +11,42 @@ const columns: ColumnDef[] = [
 ];
 
 const data = [
-  { name: 'Alice Chen', role: 'Senior Engineer', department: 'Engineering', salary: 145000, status: 'Active' },
-  { name: 'Bob Smith', role: 'Product Manager', department: 'Product', salary: 135000, status: 'Active' },
+  {
+    name: 'Alice Chen',
+    role: 'Senior Engineer',
+    department: 'Engineering',
+    salary: 145000,
+    status: 'Active',
+  },
+  {
+    name: 'Bob Smith',
+    role: 'Product Manager',
+    department: 'Product',
+    salary: 135000,
+    status: 'Active',
+  },
   { name: 'Carol Davis', role: 'Designer', department: 'Design', salary: 115000, status: 'Active' },
-  { name: 'David Lee', role: 'DevOps Lead', department: 'Infrastructure', salary: 140000, status: 'Active' },
-  { name: 'Eve Wilson', role: 'Data Analyst', department: 'Analytics', salary: 105000, status: 'On Leave' },
-  { name: 'Frank Brown', role: 'QA Engineer', department: 'Engineering', salary: 110000, status: 'Active' },
+  {
+    name: 'David Lee',
+    role: 'DevOps Lead',
+    department: 'Infrastructure',
+    salary: 140000,
+    status: 'Active',
+  },
+  {
+    name: 'Eve Wilson',
+    role: 'Data Analyst',
+    department: 'Analytics',
+    salary: 105000,
+    status: 'On Leave',
+  },
+  {
+    name: 'Frank Brown',
+    role: 'QA Engineer',
+    department: 'Engineering',
+    salary: 110000,
+    status: 'Active',
+  },
 ];
 
 export function DemoHero() {
diff --git a/packages/demo/src/visual-tests/scenarios/demo-row-grouping.tsx b/packages/demo/src/visual-tests/scenarios/demo-row-grouping.tsx
index 9545111..ce6ecbe 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-row-grouping.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-row-grouping.tsx
@@ -36,9 +36,7 @@ export function DemoRowGrouping() {
       { headerRow: 4, childRows: [5, 6], expanded: true },
       { headerRow: 7, childRows: [8, 9, 10], expanded: false },
     ]);
-    rgm.setAggregates([
-      { col: 2, fn: 'sum' },
-    ]);
+    rgm.setAggregates([{ col: 2, fn: 'sum' }]);
     engine.requestRender();
   }, []);
   return (
diff --git a/packages/demo/src/visual-tests/scenarios/demo-theme-switcher.tsx b/packages/demo/src/visual-tests/scenarios/demo-theme-switcher.tsx
index 6f5b686..2fe4d4b 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-theme-switcher.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-theme-switcher.tsx
@@ -15,7 +15,13 @@ const data = generateRows(15);
 export function DemoThemeSwitcher() {
   return (
     <ScenarioContainer width={550} height={350} background="#1e1e2e">
-      <Spreadsheet columns={columns} data={data} theme={darkTheme} showRowNumbers style={tableStyle} />
+      <Spreadsheet
+        columns={columns}
+        data={data}
+        theme={darkTheme}
+        showRowNumbers
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/demo-validation.tsx b/packages/demo/src/visual-tests/scenarios/demo-validation.tsx
index 6317deb..66d00e9 100644
--- a/packages/demo/src/visual-tests/scenarios/demo-validation.tsx
+++ b/packages/demo/src/visual-tests/scenarios/demo-validation.tsx
@@ -24,9 +24,13 @@ export function DemoValidation() {
     if (!engine) return;
     const ve = engine.getValidationEngine();
     ve.setColumnRules(0, [{ type: 'required', message: 'Name is required' }]);
-    ve.setColumnRules(1, [{ type: 'regex', pattern: '^[^@]+@[^@]+\\.[^@]+$', message: 'Invalid email format' }]);
+    ve.setColumnRules(1, [
+      { type: 'regex', pattern: '^[^@]+@[^@]+\\.[^@]+$', message: 'Invalid email format' },
+    ]);
     ve.setColumnRules(2, [{ type: 'range', min: 18, max: 65, message: 'Age must be 18-65' }]);
-    ve.setColumnRules(3, [{ type: 'regex', pattern: '^[A-Z]{3}-\\d{3}$', message: 'Format: ABC-123' }]);
+    ve.setColumnRules(3, [
+      { type: 'regex', pattern: '^[A-Z]{3}-\\d{3}$', message: 'Format: ABC-123' },
+    ]);
     for (let row = 0; row < data.length; row++) {
       for (let col = 0; col <= 3; col++) {
         ve.validateCell(row, col);
@@ -36,7 +40,14 @@ export function DemoValidation() {
   }, []);
   return (
     <ScenarioContainer width={630} height={220}>
-      <Spreadsheet ref={ref} columns={columns} data={data} editable showRowNumbers style={tableStyle} />
+      <Spreadsheet
+        ref={ref}
+        columns={columns}
+        data={data}
+        editable
+        showRowNumbers
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/frozen-panes.tsx b/packages/demo/src/visual-tests/scenarios/frozen-panes.tsx
index 4d50a1f..8d6da9d 100644
--- a/packages/demo/src/visual-tests/scenarios/frozen-panes.tsx
+++ b/packages/demo/src/visual-tests/scenarios/frozen-panes.tsx
@@ -17,7 +17,13 @@ const data = generateRows(50);
 export function FrozenPanes() {
   return (
     <ScenarioContainer width={500} height={400}>
-      <Spreadsheet columns={columns} data={data} frozenRows={2} frozenColumns={1} style={tableStyle} />
+      <Spreadsheet
+        columns={columns}
+        data={data}
+        frozenRows={2}
+        frozenColumns={1}
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/long-text.tsx b/packages/demo/src/visual-tests/scenarios/long-text.tsx
index 6849bb8..81a5e69 100644
--- a/packages/demo/src/visual-tests/scenarios/long-text.tsx
+++ b/packages/demo/src/visual-tests/scenarios/long-text.tsx
@@ -11,10 +11,33 @@ const columns: ColumnDef[] = [
 
 const data: Record<string, unknown>[] = [
   { id: 1, title: 'Short', description: 'Brief description', notes: 'OK' },
-  { id: 2, title: 'Medium length title that might clip', description: 'This is a somewhat longer description that should definitely get truncated in the cell', notes: 'This note is also rather long and should be clipped at the column boundary' },
-  { id: 3, title: 'A', description: 'The quick brown fox jumps over the lazy dog. This classic pangram is used to test text rendering in many applications.', notes: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
-  { id: 4, title: 'ALLCAPSVERYLONGTITLEWITHOUTSPACES', description: 'DESCRIPTIONWITHNOSPACESORBREAKS', notes: 'normalTextMixedWithCamelCase' },
-  { id: 5, title: 'Numbers 123456789', description: '12345678901234567890', notes: '0.123456789012345' },
+  {
+    id: 2,
+    title: 'Medium length title that might clip',
+    description:
+      'This is a somewhat longer description that should definitely get truncated in the cell',
+    notes: 'This note is also rather long and should be clipped at the column boundary',
+  },
+  {
+    id: 3,
+    title: 'A',
+    description:
+      'The quick brown fox jumps over the lazy dog. This classic pangram is used to test text rendering in many applications.',
+    notes:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  {
+    id: 4,
+    title: 'ALLCAPSVERYLONGTITLEWITHOUTSPACES',
+    description: 'DESCRIPTIONWITHNOSPACESORBREAKS',
+    notes: 'normalTextMixedWithCamelCase',
+  },
+  {
+    id: 5,
+    title: 'Numbers 123456789',
+    description: '12345678901234567890',
+    notes: '0.123456789012345',
+  },
 ];
 
 export function LongText() {
diff --git a/packages/demo/src/visual-tests/scenarios/many-columns.tsx b/packages/demo/src/visual-tests/scenarios/many-columns.tsx
index 509222d..63c93fb 100644
--- a/packages/demo/src/visual-tests/scenarios/many-columns.tsx
+++ b/packages/demo/src/visual-tests/scenarios/many-columns.tsx
@@ -6,7 +6,7 @@ const columns: ColumnDef[] = Array.from({ length: 30 }, (_, i) => ({
   key: `col${i}`,
   title: `Column ${i + 1}`,
   width: 80 + (i % 3) * 20,
-  type: i % 4 === 0 ? 'number' as const : undefined,
+  type: i % 4 === 0 ? ('number' as const) : undefined,
 }));
 
 const data: Record<string, unknown>[] = Array.from({ length: 50 }, (_, row) => {
diff --git a/packages/demo/src/visual-tests/scenarios/no-row-numbers.tsx b/packages/demo/src/visual-tests/scenarios/no-row-numbers.tsx
index 63d6019..aabf783 100644
--- a/packages/demo/src/visual-tests/scenarios/no-row-numbers.tsx
+++ b/packages/demo/src/visual-tests/scenarios/no-row-numbers.tsx
@@ -6,7 +6,12 @@ const data = generateRows(30);
 export function NoRowNumbers() {
   return (
     <ScenarioContainer width={800} height={400}>
-      <Spreadsheet columns={standardColumns} data={data} showRowNumbers={false} style={tableStyle} />
+      <Spreadsheet
+        columns={standardColumns}
+        data={data}
+        showRowNumbers={false}
+        style={tableStyle}
+      />
     </ScenarioContainer>
   );
 }
diff --git a/packages/demo/src/visual-tests/scenarios/shared.tsx b/packages/demo/src/visual-tests/scenarios/shared.tsx
index 8466086..8ceb3c3 100644
--- a/packages/demo/src/visual-tests/scenarios/shared.tsx
+++ b/packages/demo/src/visual-tests/scenarios/shared.tsx
@@ -11,9 +11,29 @@ export const standardColumns: ColumnDef[] = [
   { key: 'active', title: 'Active', width: 70, type: 'boolean' },
 ];
 
-const firstNames = ['Alice', 'Bob', 'Carol', 'David', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
+const firstNames = [
+  'Alice',
+  'Bob',
+  'Carol',
+  'David',
+  'Eve',
+  'Frank',
+  'Grace',
+  'Henry',
+  'Ivy',
+  'Jack',
+];
 const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis'];
-const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations', 'Legal', 'Support'];
+const departments = [
+  'Engineering',
+  'Marketing',
+  'Sales',
+  'HR',
+  'Finance',
+  'Operations',
+  'Legal',
+  'Support',
+];
 
 export function generateRows(count: number): Record<string, unknown>[] {
   const rows: Record<string, unknown>[] = [];
@@ -31,17 +51,18 @@ export function generateRows(count: number): Record<string, unknown>[] {
   return rows;
 }
 
-export function ScenarioContainer({ width, height, background, children }: {
+export function ScenarioContainer({
+  width,
+  height,
+  background,
+  children,
+}: {
   width: number;
   height: number;
   background?: string;
   children: ReactNode;
 }) {
-  return (
-    <div style={{ width, height, background }}>
-      {children}
-    </div>
-  );
+  return <div style={{ width, height, background }}>{children}</div>;
 }
 
 export const tableStyle = { width: '100%' as const, height: '100%' as const };
diff --git a/packages/demo/src/visual-tests/scenarios/validation-errors.tsx b/packages/demo/src/visual-tests/scenarios/validation-errors.tsx
index 8e33062..c4697ba 100644
--- a/packages/demo/src/visual-tests/scenarios/validation-errors.tsx
+++ b/packages/demo/src/visual-tests/scenarios/validation-errors.tsx
@@ -30,7 +30,9 @@ export function ValidationErrors() {
     // Name is required
     ve.setColumnRules(1, [{ type: 'required', message: 'Name is required' }]);
     // Email must match pattern
-    ve.setColumnRules(2, [{ type: 'regex', pattern: '^[^@]+@[^@]+\\.[^@]+$', message: 'Invalid email' }]);
+    ve.setColumnRules(2, [
+      { type: 'regex', pattern: '^[^@]+@[^@]+\\.[^@]+$', message: 'Invalid email' },
+    ]);
     // Age: 0-120
     ve.setColumnRules(3, [{ type: 'range', min: 0, max: 120, message: 'Age must be 0-120' }]);
     // Score: 0-100
diff --git a/packages/plugins/conditional-format/src/conditional-format-plugin.ts b/packages/plugins/conditional-format/src/conditional-format-plugin.ts
index 41f3185..e6a19ba 100644
--- a/packages/plugins/conditional-format/src/conditional-format-plugin.ts
+++ b/packages/plugins/conditional-format/src/conditional-format-plugin.ts
@@ -8,7 +8,7 @@
  * via a custom render layer using destination-over compositing.
  */
 
-import type { SpreadsheetPlugin, PluginAPI, ConditionalFormatRule, ConditionalFormatCondition, CellRange } from '@witqq/spreadsheet';
+import type { SpreadsheetPlugin, PluginAPI, ConditionalFormatRule, CellRange } from '@witqq/spreadsheet';
 import { ConditionalFormatLayer } from './conditional-format-layer';
 
 export const CONDITIONAL_FORMAT_PLUGIN_NAME = 'conditional-format';
diff --git a/packages/plugins/excel/src/excel-plugin.ts b/packages/plugins/excel/src/excel-plugin.ts
index 2488f78..7498982 100644
--- a/packages/plugins/excel/src/excel-plugin.ts
+++ b/packages/plugins/excel/src/excel-plugin.ts
@@ -135,7 +135,6 @@ export class ExcelPlugin implements SpreadsheetPlugin {
     const range = XLSX.utils.decode_range(ws['!ref']);
     const headerRow = range.s.r;
     const dataStartRow = headerRow + 1;
-    const colCount = range.e.c - range.s.c + 1;
     const dataRowCount = range.e.r - dataStartRow + 1;
 
     // Derive columns from header row
diff --git a/packages/plugins/formula/src/dependency-graph.ts b/packages/plugins/formula/src/dependency-graph.ts
index 251acbb..a3979fe 100644
--- a/packages/plugins/formula/src/dependency-graph.ts
+++ b/packages/plugins/formula/src/dependency-graph.ts
@@ -237,23 +237,6 @@ export class DependencyGraph {
     if (deps.includes(cell)) return true;
 
     // DFS: can we reach `cell` from any of its new deps?
-    const visited = new Set<string>();
-
-    function dfs(current: string, dependedBy: Map<string, Set<string>>): boolean {
-      if (current === cell) return true;
-      if (visited.has(current)) return false;
-      visited.add(current);
-
-      // Follow the "depends on" chain from current
-      // We need to check: if we go FROM deps through THEIR deps, can we reach cell?
-      const nextDeps = dependedBy.get(current);
-      if (nextDeps) {
-        for (const next of nextDeps) {
-          if (dfs(next, dependedBy)) return true;
-        }
-      }
-      return false;
-    }
 
     // We want to check: can any of `deps` reach `cell` through the dependedBy graph?
     // Actually, we need to check: if cell depends on deps, and some dep transitively depends on cell
diff --git a/packages/plugins/formula/src/evaluator.ts b/packages/plugins/formula/src/evaluator.ts
index 4972453..4ffa2b2 100644
--- a/packages/plugins/formula/src/evaluator.ts
+++ b/packages/plugins/formula/src/evaluator.ts
@@ -8,7 +8,7 @@
  * comparison, concatenation, and built-in functions.
  */
 
-import type { ASTNode, RangeNode, CellRefNode } from './parser';
+import type { ASTNode, RangeNode } from './parser';
 import {
   FormulaError,
   FormulaErrorType,
diff --git a/packages/plugins/src/collaboration/collaboration-plugin.ts b/packages/plugins/src/collaboration/collaboration-plugin.ts
index 35dac99..e1adc8c 100644
--- a/packages/plugins/src/collaboration/collaboration-plugin.ts
+++ b/packages/plugins/src/collaboration/collaboration-plugin.ts
@@ -66,13 +66,9 @@ export class CollaborationPlugin implements SpreadsheetPlugin {
 
   destroy(): void {
     if (this.api) {
-      this.api.engine
-        .getEventBus()
-        .off('cellChange', this.handleLocalCellChange);
+      this.api.engine.getEventBus().off('cellChange', this.handleLocalCellChange);
       if (this.config.sendCursor) {
-        this.api.engine
-          .getEventBus()
-          .off('selectionChange', this.handleSelectionChange);
+        this.api.engine.getEventBus().off('selectionChange', this.handleSelectionChange);
       }
       if (this.config.cursorLayer) {
         this.api.engine.removeRenderLayer(this.config.cursorLayer);
@@ -138,10 +134,7 @@ export class CollaborationPlugin implements SpreadsheetPlugin {
     const newPending: OTOperation[] = [];
     for (const pendingOp of this.pendingOps) {
       if (!remoteOp) break;
-      const [remoteTransformed, pendingTransformed] = transform(
-        remoteOp,
-        pendingOp,
-      );
+      const [remoteTransformed, pendingTransformed] = transform(remoteOp, pendingOp);
       remoteOp = remoteTransformed;
       if (pendingTransformed) {
         newPending.push(pendingTransformed);
diff --git a/packages/plugins/src/collaboration/ot-engine.ts b/packages/plugins/src/collaboration/ot-engine.ts
index 7ea651a..f16ea77 100644
--- a/packages/plugins/src/collaboration/ot-engine.ts
+++ b/packages/plugins/src/collaboration/ot-engine.ts
@@ -14,12 +14,7 @@
  * Invariant: apply(apply(state, opA), opB') === apply(apply(state, opB), opA')
  */
 
-import type {
-  OTOperation,
-  SetCellValueOp,
-  InsertRowOp,
-  DeleteRowOp,
-} from './ot-types';
+import type { OTOperation, SetCellValueOp, InsertRowOp, DeleteRowOp } from './ot-types';
 
 export type TransformResult = [OTOperation | null, OTOperation | null];
 
@@ -27,10 +22,7 @@ export type TransformResult = [OTOperation | null, OTOperation | null];
  * Transform opA against opB, returning [opA', opB'].
  * null means the operation becomes a no-op.
  */
-export function transform(
-  opA: OTOperation,
-  opB: OTOperation,
-): TransformResult {
+export function transform(opA: OTOperation, opB: OTOperation): TransformResult {
   const key = `${opA.type}:${opB.type}` as const;
 
   switch (key) {
@@ -41,21 +33,15 @@ export function transform(
     case 'setCellValue:deleteRow':
       return transformSetDelete(opA as SetCellValueOp, opB as DeleteRowOp);
     case 'insertRow:setCellValue':
-      return swap(
-        transformSetInsert(opB as SetCellValueOp, opA as InsertRowOp),
-      );
+      return swap(transformSetInsert(opB as SetCellValueOp, opA as InsertRowOp));
     case 'insertRow:insertRow':
       return transformInsertInsert(opA as InsertRowOp, opB as InsertRowOp);
     case 'insertRow:deleteRow':
       return transformInsertDelete(opA as InsertRowOp, opB as DeleteRowOp);
     case 'deleteRow:setCellValue':
-      return swap(
-        transformSetDelete(opB as SetCellValueOp, opA as DeleteRowOp),
-      );
+      return swap(transformSetDelete(opB as SetCellValueOp, opA as DeleteRowOp));
     case 'deleteRow:insertRow':
-      return swap(
-        transformInsertDelete(opB as InsertRowOp, opA as DeleteRowOp),
-      );
+      return swap(transformInsertDelete(opB as InsertRowOp, opA as DeleteRowOp));
     case 'deleteRow:deleteRow':
       return transformDeleteDelete(opA as DeleteRowOp, opB as DeleteRowOp);
     default:
@@ -69,10 +55,7 @@ function swap(result: TransformResult): TransformResult {
 
 // ─── setCellValue × setCellValue ────────────────────────
 
-function transformSetSet(
-  a: SetCellValueOp,
-  b: SetCellValueOp,
-): TransformResult {
+function transformSetSet(a: SetCellValueOp, b: SetCellValueOp): TransformResult {
   if (a.row === b.row && a.col === b.col) {
     // Both edit the same cell — last-writer-wins (opB wins as "server" op)
     // opA becomes no-op, opB stays
@@ -84,10 +67,7 @@ function transformSetSet(
 
 // ─── setCellValue × insertRow ───────────────────────────
 
-function transformSetInsert(
-  set: SetCellValueOp,
-  ins: InsertRowOp,
-): TransformResult {
+function transformSetInsert(set: SetCellValueOp, ins: InsertRowOp): TransformResult {
   if (set.row >= ins.row) {
     // Cell shifted down by insert
     return [{ ...set, row: set.row + ins.count }, ins];
@@ -97,10 +77,7 @@ function transformSetInsert(
 
 // ─── setCellValue × deleteRow ───────────────────────────
 
-function transformSetDelete(
-  set: SetCellValueOp,
-  del: DeleteRowOp,
-): TransformResult {
+function transformSetDelete(set: SetCellValueOp, del: DeleteRowOp): TransformResult {
   if (set.row >= del.row && set.row < del.row + del.count) {
     // Cell is in deleted range — set becomes no-op
     return [null, del];
@@ -114,10 +91,7 @@ function transformSetDelete(
 
 // ─── insertRow × insertRow ──────────────────────────────
 
-function transformInsertInsert(
-  a: InsertRowOp,
-  b: InsertRowOp,
-): TransformResult {
+function transformInsertInsert(a: InsertRowOp, b: InsertRowOp): TransformResult {
   if (a.row <= b.row) {
     // A inserts before or at B's position — B shifts down
     return [a, { ...b, row: b.row + a.count }];
@@ -128,10 +102,7 @@ function transformInsertInsert(
 
 // ─── insertRow × deleteRow ──────────────────────────────
 
-function transformInsertDelete(
-  ins: InsertRowOp,
-  del: DeleteRowOp,
-): TransformResult {
+function transformInsertDelete(ins: InsertRowOp, del: DeleteRowOp): TransformResult {
   if (ins.row <= del.row) {
     // Insert before delete range — delete shifts down
     return [ins, { ...del, row: del.row + ins.count }];
@@ -146,10 +117,7 @@ function transformInsertDelete(
 
 // ─── deleteRow × deleteRow ──────────────────────────────
 
-function transformDeleteDelete(
-  a: DeleteRowOp,
-  b: DeleteRowOp,
-): TransformResult {
+function transformDeleteDelete(a: DeleteRowOp, b: DeleteRowOp): TransformResult {
   const aEnd = a.row + a.count;
   const bEnd = b.row + b.count;
 
diff --git a/packages/plugins/tsconfig.json b/packages/plugins/tsconfig.json
index a4320ca..b6f91dd 100644
--- a/packages/plugins/tsconfig.json
+++ b/packages/plugins/tsconfig.json
@@ -6,7 +6,7 @@
     "composite": true,
     "emitDeclarationOnly": true
   },
-  "include": ["src", "formula/src", "context-menu/src", "conditional-format/src", "excel/src"],
+  "include": ["src", "formula/src", "context-menu/src", "conditional-format/src", "excel/src", "progressive-loader/src"],
   "references": [
     { "path": "../core" }
   ]
diff --git a/packages/react/src/components/Spreadsheet.tsx b/packages/react/src/components/Spreadsheet.tsx
index d6bf427..d435840 100644
--- a/packages/react/src/components/Spreadsheet.tsx
+++ b/packages/react/src/components/Spreadsheet.tsx
@@ -8,7 +8,6 @@ import type {
   CellData,
   CellValue,
   Selection,
-  SpreadsheetTheme,
   SpreadsheetPlugin,
 } from '@witqq/spreadsheet';
 import type {
@@ -33,8 +32,7 @@ export interface SpreadsheetCallbacks {
 // ─── Props (generic over row type) ──────────────────────────
 
 export interface SpreadsheetProps<TRow extends Record<string, unknown> = Record<string, unknown>>
-  extends Omit<SpreadsheetEngineConfig, 'data'>,
-    SpreadsheetCallbacks {
+  extends Omit<SpreadsheetEngineConfig, 'data'>, SpreadsheetCallbacks {
   data?: TRow[];
   className?: string;
   style?: React.CSSProperties;
@@ -105,7 +103,8 @@ function SpreadsheetInner<TRow extends Record<string, unknown> = Record<string,
   // Store callbacks in refs to avoid stale closures
   const callbackRefs = useRef<SpreadsheetCallbacks>({});
   for (const key of CALLBACK_KEYS) {
-    callbackRefs.current[key] = props[key];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (callbackRefs.current as any)[key] = props[key];
   }
 
   useImperativeHandle(ref, () => ({
@@ -166,7 +165,7 @@ function SpreadsheetInner<TRow extends Record<string, unknown> = Record<string,
       onScroll: _5,
       onReady: _6,
       ...config
-    } = props;
+    } = props; // destructure callbacks to exclude from engine config
 
     const engine = new SpreadsheetEngine(config as SpreadsheetEngineConfig);
     engine.mount(containerRef.current);
@@ -193,7 +192,7 @@ function SpreadsheetInner<TRow extends Record<string, unknown> = Record<string,
       engine.destroy();
       engineRef.current = null;
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []);
 
   // Prop update: theme (without remount)
   useEffect(() => {
@@ -217,7 +216,7 @@ function SpreadsheetInner<TRow extends Record<string, unknown> = Record<string,
     engine.getCellStore().bulkLoad(data, columnKeys);
     engine.setRowCount(data.length);
     engine.requestRender();
-  }, [props.data]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [props.data]);
 
   return (
     <div
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 1a9e2a5..11e5e11 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -2,7 +2,11 @@
 // Copyright (c) 2025 witqq contributors
 
 export { Spreadsheet } from './components/Spreadsheet';
-export type { SpreadsheetProps, SpreadsheetRef, SpreadsheetCallbacks } from './components/Spreadsheet';
+export type {
+  SpreadsheetProps,
+  SpreadsheetRef,
+  SpreadsheetCallbacks,
+} from './components/Spreadsheet';
 
 // Re-export core types for convenience
 export type {
diff --git a/packages/server/src/collab-server.ts b/packages/server/src/collab-server.ts
index cc07bc4..4a902f1 100644
--- a/packages/server/src/collab-server.ts
+++ b/packages/server/src/collab-server.ts
@@ -24,8 +24,14 @@ export interface ServerMessage {
 }
 
 const CURSOR_COLORS = [
-  '#e74c3c', '#3498db', '#2ecc71', '#f39c12',
-  '#9b59b6', '#1abc9c', '#e67e22', '#34495e',
+  '#e74c3c',
+  '#3498db',
+  '#2ecc71',
+  '#f39c12',
+  '#9b59b6',
+  '#1abc9c',
+  '#e67e22',
+  '#34495e',
 ];
 
 export function createCollabServer(port: number): {
@@ -71,10 +77,7 @@ export function createCollabServer(port: number): {
     });
 
     // Notify others of new client
-    broadcast(
-      { type: 'join', clientId, color, name: client.name },
-      clientId,
-    );
+    broadcast({ type: 'join', clientId, color, name: client.name }, clientId);
 
     ws.on('message', (data: Buffer) => {
       let msg: ServerMessage;
@@ -141,10 +144,7 @@ export function createCollabServer(port: number): {
     send(client.ws, { type: 'ack', revision });
 
     // Broadcast to others
-    broadcast(
-      { type: 'op', clientId: client.id, revision, op: transformedOp },
-      client.id,
-    );
+    broadcast({ type: 'op', clientId: client.id, revision, op: transformedOp }, client.id);
   }
 
   function handleCursor(client: ClientInfo, msg: ServerMessage): void {
diff --git a/packages/site/.astro/content-modules.mjs b/packages/site/.astro/content-modules.mjs
index c583f97..57efc65 100644
--- a/packages/site/.astro/content-modules.mjs
+++ b/packages/site/.astro/content-modules.mjs
@@ -1,47 +1,53 @@
 
 export default new Map([
-["src/content/docs/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Findex.mdx&astroContentModuleFlag=true")],
-["src/content/docs/api/cell-types.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fapi%2Fcell-types.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/api/wit-engine.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fapi%2Fwit-engine.mdx&astroContentModuleFlag=true")],
+["src/content/docs/api/cell-types.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fapi%2Fcell-types.mdx&astroContentModuleFlag=true")],
+["src/content/docs/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Findex.mdx&astroContentModuleFlag=true")],
+["src/content/docs/concepts/data-model.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Fdata-model.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/api/types.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fapi%2Ftypes.mdx&astroContentModuleFlag=true")],
-["src/content/docs/frameworks/angular.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Fangular.mdx&astroContentModuleFlag=true")],
-["src/content/docs/frameworks/react.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Freact.mdx&astroContentModuleFlag=true")],
-["src/content/docs/frameworks/vue.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Fvue.mdx&astroContentModuleFlag=true")],
+["src/content/docs/concepts/rendering.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Frendering.mdx&astroContentModuleFlag=true")],
+["src/content/docs/concepts/architecture.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Farchitecture.mdx&astroContentModuleFlag=true")],
+["src/content/docs/concepts/events.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Fevents.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/accessibility.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Faccessibility.mdx&astroContentModuleFlag=true")],
+["src/content/docs/concepts/themes.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Fthemes.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/autofill.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fautofill.mdx&astroContentModuleFlag=true")],
-["src/content/docs/frameworks/widget.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Fwidget.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/auto-row-height.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fauto-row-height.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/change-tracking.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fchange-tracking.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/clipboard.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fclipboard.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/dataview.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fdataview.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/editing.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fediting.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/column-stretch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fcolumn-stretch.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/cell-editor-registry.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fcell-editor-registry.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/context-menu.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fcontext-menu.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/filtering.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Ffiltering.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/date-editors.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fdate-editors.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/editing.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fediting.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/dataview.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fdataview.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/features.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Ffeatures.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/frozen-panes.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Ffrozen-panes.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/filtering.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Ffiltering.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/locale.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Flocale.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/merging.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fmerging.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/migration-from-handsontable.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fmigration-from-handsontable.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/resize.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fresize.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/print.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fprint.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/migration-from-handsontable.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fmigration-from-handsontable.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/pivot.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fpivot.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/row-grouping.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Frow-grouping.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/print.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fprint.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/selection.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fselection.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/streaming.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fstreaming.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/text-wrapping.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Ftext-wrapping.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/sorting.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fsorting.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/undo-redo.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fundo-redo.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/guides/validation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fvalidation.mdx&astroContentModuleFlag=true")],
-["src/content/docs/guides/streaming.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fstreaming.mdx&astroContentModuleFlag=true")],
-["src/content/docs/concepts/architecture.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Farchitecture.mdx&astroContentModuleFlag=true")],
-["src/content/docs/concepts/data-model.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Fdata-model.mdx&astroContentModuleFlag=true")],
-["src/content/docs/concepts/rendering.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Frendering.mdx&astroContentModuleFlag=true")],
-["src/content/docs/concepts/themes.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Fthemes.mdx&astroContentModuleFlag=true")],
-["src/content/docs/concepts/events.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fconcepts%2Fevents.mdx&astroContentModuleFlag=true")],
+["src/content/docs/guides/undo-redo.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fguides%2Fundo-redo.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/plugins/collaboration.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fcollaboration.mdx&astroContentModuleFlag=true")],
-["src/content/docs/plugins/excel.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fexcel.mdx&astroContentModuleFlag=true")],
-["src/content/docs/plugins/custom-functions.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fcustom-functions.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/plugins/conditional-format.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fconditional-format.mdx&astroContentModuleFlag=true")],
-["src/content/docs/plugins/formulas.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fformulas.mdx&astroContentModuleFlag=true")],
+["src/content/docs/plugins/custom-functions.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fcustom-functions.mdx&astroContentModuleFlag=true")],
+["src/content/docs/plugins/excel.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fexcel.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/plugins/overview.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Foverview.mdx&astroContentModuleFlag=true")],
-["src/content/docs/getting-started/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Findex.mdx&astroContentModuleFlag=true")],
+["src/content/docs/frameworks/angular.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Fangular.mdx&astroContentModuleFlag=true")],
+["src/content/docs/plugins/formulas.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fformulas.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/plugins/progressive-loader.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fplugins%2Fprogressive-loader.mdx&astroContentModuleFlag=true")],
+["src/content/docs/frameworks/react.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Freact.mdx&astroContentModuleFlag=true")],
+["src/content/docs/frameworks/vue.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Fvue.mdx&astroContentModuleFlag=true")],
+["src/content/docs/frameworks/widget.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframeworks%2Fwidget.mdx&astroContentModuleFlag=true")],
+["src/content/docs/getting-started/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Findex.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/getting-started/configuration.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Fconfiguration.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/getting-started/installation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Finstallation.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/getting-started/quick-start.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Fquick-start.mdx&astroContentModuleFlag=true")],
diff --git a/packages/site/astro.config.mjs b/packages/site/astro.config.mjs
index d9b201b..5fcd123 100644
--- a/packages/site/astro.config.mjs
+++ b/packages/site/astro.config.mjs
@@ -53,10 +53,16 @@ export default defineConfig({
             { label: 'Clipboard', slug: 'guides/clipboard' },
             { label: 'Undo & Redo', slug: 'guides/undo-redo' },
             { label: 'Column & Row Resize', slug: 'guides/resize' },
+            { label: 'Auto Row Height', slug: 'guides/auto-row-height' },
+            { label: 'Text Wrapping', slug: 'guides/text-wrapping' },
+            { label: 'Column Stretch', slug: 'guides/column-stretch' },
             { label: 'Autofill', slug: 'guides/autofill' },
             { label: 'Change Tracking', slug: 'guides/change-tracking' },
             { label: 'Validation', slug: 'guides/validation' },
             { label: 'Context Menu', slug: 'guides/context-menu' },
+            { label: 'Date & DateTime Editors', slug: 'guides/date-editors' },
+            { label: 'Cell Editor Registry', slug: 'guides/cell-editor-registry' },
+            { label: 'Locale System', slug: 'guides/locale' },
             { label: 'Accessibility', slug: 'guides/accessibility' },
             { label: 'Print Support', slug: 'guides/print' },
             { label: 'Streaming Data', slug: 'guides/streaming' },
diff --git a/packages/site/src/components/demos/AccessibilityDemo.tsx b/packages/site/src/components/demos/AccessibilityDemo.tsx
index 699fd64..b063f3b 100644
--- a/packages/site/src/components/demos/AccessibilityDemo.tsx
+++ b/packages/site/src/components/demos/AccessibilityDemo.tsx
@@ -8,7 +8,11 @@ const data = generateEmployees(50);
 export function AccessibilityDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="This table has built-in ARIA attributes: role=grid, aria-rowcount, aria-colcount. Use keyboard arrows to navigate; screen reader announces cell positions." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="This table has built-in ARIA attributes: role=grid, aria-rowcount, aria-colcount. Use keyboard arrows to navigate; screen reader announces cell positions."
+      height={440}
+    >
       <Spreadsheet
         theme={witTheme}
         columns={employeeColumns}
diff --git a/packages/site/src/components/demos/AutofillDemo.tsx b/packages/site/src/components/demos/AutofillDemo.tsx
index 75ce586..975e863 100644
--- a/packages/site/src/components/demos/AutofillDemo.tsx
+++ b/packages/site/src/components/demos/AutofillDemo.tsx
@@ -26,7 +26,11 @@ const data = [
 export function AutofillDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="Select cells 10, 20, 30 in the Value column, then drag the fill handle (small square at bottom-right of selection) downward. Pattern detection extends the sequence." height={400}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Select cells 10, 20, 30 in the Value column, then drag the fill handle (small square at bottom-right of selection) downward. Pattern detection extends the sequence."
+      height={400}
+    >
       <Spreadsheet
         theme={witTheme}
         columns={columns}
diff --git a/packages/site/src/components/demos/BasicTableDemo.tsx b/packages/site/src/components/demos/BasicTableDemo.tsx
index 910b218..76d7cb9 100644
--- a/packages/site/src/components/demos/BasicTableDemo.tsx
+++ b/packages/site/src/components/demos/BasicTableDemo.tsx
@@ -8,7 +8,10 @@ const data = generateEmployees(200);
 export function BasicTableDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="Scroll through 200 rows. Resize columns by dragging header borders.">
+    <DemoWrapper
+      title="Live Demo"
+      description="Scroll through 200 rows. Resize columns by dragging header borders."
+    >
       <Spreadsheet
         theme={witTheme}
         columns={employeeColumns}
diff --git a/packages/site/src/components/demos/CellTypesDemo.tsx b/packages/site/src/components/demos/CellTypesDemo.tsx
index fe85ba8..a5e3cac 100644
--- a/packages/site/src/components/demos/CellTypesDemo.tsx
+++ b/packages/site/src/components/demos/CellTypesDemo.tsx
@@ -16,11 +16,51 @@ const columns: ColumnDef[] = [
 ];
 
 const data = [
-  { id: 1, text: 'Hello World', amount: 1234.56, active: true, created: '2025-01-15', progress: 85, rating: 5 },
-  { id: 2, text: 'Test Data', amount: -42, active: false, created: '2024-06-01', progress: 45, rating: 3 },
-  { id: 3, text: 'Long text that will be truncated in the cell', amount: 0, active: true, created: '2023-12-25', progress: 10, rating: 1 },
-  { id: 4, text: '', amount: 99999, active: false, created: '2025-03-01', progress: 100, rating: 4 },
-  { id: 5, text: 'Final Row', amount: 500, active: true, created: '2025-02-14', progress: 62, rating: 2 },
+  {
+    id: 1,
+    text: 'Hello World',
+    amount: 1234.56,
+    active: true,
+    created: '2025-01-15',
+    progress: 85,
+    rating: 5,
+  },
+  {
+    id: 2,
+    text: 'Test Data',
+    amount: -42,
+    active: false,
+    created: '2024-06-01',
+    progress: 45,
+    rating: 3,
+  },
+  {
+    id: 3,
+    text: 'Long text that will be truncated in the cell',
+    amount: 0,
+    active: true,
+    created: '2023-12-25',
+    progress: 10,
+    rating: 1,
+  },
+  {
+    id: 4,
+    text: '',
+    amount: 99999,
+    active: false,
+    created: '2025-03-01',
+    progress: 100,
+    rating: 4,
+  },
+  {
+    id: 5,
+    text: 'Final Row',
+    amount: 500,
+    active: true,
+    created: '2025-02-14',
+    progress: 62,
+    rating: 2,
+  },
 ];
 
 export function CellTypesDemo() {
@@ -72,7 +112,11 @@ export function CellTypesDemo() {
   }, []);
 
   return (
-    <DemoWrapper title="Live Demo" description="All cell types in one table: string, number (right-aligned), boolean (checkbox), date, progress bar, and star rating." height={300}>
+    <DemoWrapper
+      title="Live Demo"
+      description="All cell types in one table: string, number (right-aligned), boolean (checkbox), date, progress bar, and star rating."
+      height={300}
+    >
       <Spreadsheet
         theme={witTheme}
         ref={tableRef}
diff --git a/packages/site/src/components/demos/ChangeTrackingDemo.tsx b/packages/site/src/components/demos/ChangeTrackingDemo.tsx
index 6cc848f..2bb7e29 100644
--- a/packages/site/src/components/demos/ChangeTrackingDemo.tsx
+++ b/packages/site/src/components/demos/ChangeTrackingDemo.tsx
@@ -12,7 +12,9 @@ const data = generateEmployees(30);
 export function ChangeTrackingDemo() {
   const { witTheme } = useSiteTheme();
   const tableRef = useRef<SpreadsheetRef>(null);
-  const [status, setStatus] = useState('Edit cells, then click "Simulate Save" to see the status lifecycle.');
+  const [status, setStatus] = useState(
+    'Edit cells, then click "Simulate Save" to see the status lifecycle.',
+  );
 
   useEffect(() => {
     const engine = tableRef.current?.getInstance();
@@ -36,7 +38,7 @@ export function ChangeTrackingDemo() {
     }
     engine.requestRender();
 
-    await new Promise(r => setTimeout(r, 1000));
+    await new Promise((r) => setTimeout(r, 1000));
 
     for (const cell of changed) {
       tracker.setCellStatus(cell.row, cell.col, 'saved');
@@ -44,7 +46,7 @@ export function ChangeTrackingDemo() {
     engine.requestRender();
     setStatus(`Saved ${changed.length} cell(s). Status will clear shortly.`);
 
-    await new Promise(r => setTimeout(r, 1500));
+    await new Promise((r) => setTimeout(r, 1500));
     for (const cell of changed) {
       engine.getCellStore().clearMetadata(cell.row, cell.col);
     }
@@ -54,7 +56,11 @@ export function ChangeTrackingDemo() {
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Edit cells to see 'changed' status (blue border). Click Save to see saving → saved lifecycle." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Edit cells to see 'changed' status (blue border). Click Save to see saving → saved lifecycle."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
           <DemoButton onClick={handleSimulateSave}>💾 Simulate Save</DemoButton>
diff --git a/packages/site/src/components/demos/ClipboardDemo.tsx b/packages/site/src/components/demos/ClipboardDemo.tsx
index 4766fb7..e7c009d 100644
--- a/packages/site/src/components/demos/ClipboardDemo.tsx
+++ b/packages/site/src/components/demos/ClipboardDemo.tsx
@@ -12,14 +12,15 @@ export function ClipboardDemo() {
   const [log, setLog] = useState<string[]>(['Select cells and use Ctrl+C / Ctrl+X / Ctrl+V']);
 
   const handleCellChange = (event: CellChangeEvent) => {
-    setLog(prev => [
-      `Cell (${event.row}, ${event.col}) → "${event.value}"`,
-      ...prev.slice(0, 9),
-    ]);
+    setLog((prev) => [`Cell (${event.row}, ${event.col}) → "${event.value}"`, ...prev.slice(0, 9)]);
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Select cells, copy (Ctrl+C), cut (Ctrl+X), click another cell, paste (Ctrl+V). Changes appear in the log below." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Select cells, copy (Ctrl+C), cut (Ctrl+X), click another cell, paste (Ctrl+V). Changes appear in the log below."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <div style={{ flex: 1 }}>
           <Spreadsheet
@@ -32,8 +33,20 @@ export function ClipboardDemo() {
             style={{ width: '100%', height: '100%' }}
           />
         </div>
-        <div style={{ padding: '0.5rem 0.75rem', fontSize: '0.75rem', color: '#64748b', borderTop: '1px solid #e2e8f0', flexShrink: 0, maxHeight: 60, overflow: 'auto' }}>
-          {log.map((entry, i) => <div key={i}>{entry}</div>)}
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            fontSize: '0.75rem',
+            color: '#64748b',
+            borderTop: '1px solid #e2e8f0',
+            flexShrink: 0,
+            maxHeight: 60,
+            overflow: 'auto',
+          }}
+        >
+          {log.map((entry, i) => (
+            <div key={i}>{entry}</div>
+          ))}
         </div>
       </div>
     </DemoWrapper>
diff --git a/packages/site/src/components/demos/ConditionalFormatDemo.tsx b/packages/site/src/components/demos/ConditionalFormatDemo.tsx
index 1fd660f..1136d6d 100644
--- a/packages/site/src/components/demos/ConditionalFormatDemo.tsx
+++ b/packages/site/src/components/demos/ConditionalFormatDemo.tsx
@@ -51,33 +51,52 @@ export function ConditionalFormatDemo() {
     const plugin = new ConditionalFormattingPlugin();
     engine.installPlugin(plugin);
 
-    plugin.addRule(ConditionalFormattingPlugin.createGradientScale(
-      { startRow: 0, startCol: 1, endRow: 9, endCol: 1 },
-      [
-        { value: 0, color: '#ef4444' },
-        { value: 50, color: '#eab308' },
-        { value: 100, color: '#22c55e' },
-      ]
-    ));
+    plugin.addRule(
+      ConditionalFormattingPlugin.createGradientScale(
+        { startRow: 0, startCol: 1, endRow: 9, endCol: 1 },
+        [
+          { value: 0, color: '#ef4444' },
+          { value: 50, color: '#eab308' },
+          { value: 100, color: '#22c55e' },
+        ],
+      ),
+    );
 
-    plugin.addRule(ConditionalFormattingPlugin.createDataBar(
-      { startRow: 0, startCol: 2, endRow: 9, endCol: 2 },
-      '#3b82f6'
-    ));
+    plugin.addRule(
+      ConditionalFormattingPlugin.createDataBar(
+        { startRow: 0, startCol: 2, endRow: 9, endCol: 2 },
+        '#3b82f6',
+      ),
+    );
 
-    plugin.addRule(ConditionalFormattingPlugin.createIconSet(
-      { startRow: 0, startCol: 3, endRow: 9, endCol: 3 },
-      'arrows'
-    ));
+    plugin.addRule(
+      ConditionalFormattingPlugin.createIconSet(
+        { startRow: 0, startCol: 3, endRow: 9, endCol: 3 },
+        'arrows',
+      ),
+    );
 
     engine.requestRender();
     setStatus('Gradient: Math | Data Bars: Science | Icons: English');
   }, []);
 
   return (
-    <DemoWrapper title="Live Demo" description="Gradient scales on Math (red→yellow→green), data bars on Science (blue), and icon sets on English (arrows)." height={420}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Gradient scales on Math (red→yellow→green), data bars on Science (blue), and icon sets on English (arrows)."
+      height={420}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', borderBottom: '1px solid #e2e8f0', flexShrink: 0, display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+            display: 'flex',
+            gap: '0.5rem',
+            alignItems: 'center',
+          }}
+        >
           <span style={{ fontSize: '0.8rem', color: '#64748b' }}>{status}</span>
         </div>
         <div style={{ flex: 1 }}>
diff --git a/packages/site/src/components/demos/ContextMenuDemo.tsx b/packages/site/src/components/demos/ContextMenuDemo.tsx
index 345e06f..87a72ea 100644
--- a/packages/site/src/components/demos/ContextMenuDemo.tsx
+++ b/packages/site/src/components/demos/ContextMenuDemo.tsx
@@ -10,7 +10,9 @@ const data = generateEmployees(50);
 export function ContextMenuDemo() {
   const { witTheme } = useSiteTheme();
   const tableRef = useRef<SpreadsheetRef>(null);
-  const [lastAction, setLastAction] = useState('Right-click any cell, header, or row number to see the context menu.');
+  const [lastAction, setLastAction] = useState(
+    'Right-click any cell, header, or row number to see the context menu.',
+  );
 
   useEffect(() => {
     const engine = tableRef.current?.getInstance();
@@ -51,9 +53,21 @@ export function ContextMenuDemo() {
   }, []);
 
   return (
-    <DemoWrapper title="Live Demo" description="Right-click cells, headers, row numbers, or the corner to see context-specific menus with custom items." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Right-click cells, headers, row numbers, or the corner to see context-specific menus with custom items."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', fontSize: '0.8rem', color: '#64748b', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            fontSize: '0.8rem',
+            color: '#64748b',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+          }}
+        >
           {lastAction}
         </div>
         <div style={{ flex: 1 }}>
diff --git a/packages/site/src/components/demos/DemoButton.tsx b/packages/site/src/components/demos/DemoButton.tsx
index 94e73a8..2dd0def 100644
--- a/packages/site/src/components/demos/DemoButton.tsx
+++ b/packages/site/src/components/demos/DemoButton.tsx
@@ -29,7 +29,10 @@ const base: CSSProperties = {
   whiteSpace: 'nowrap',
 };
 
-const variants: Record<DemoButtonVariant, { normal: CSSProperties; hover: CSSProperties; active?: CSSProperties }> = {
+const variants: Record<
+  DemoButtonVariant,
+  { normal: CSSProperties; hover: CSSProperties; active?: CSSProperties }
+> = {
   default: {
     normal: {},
     hover: { background: 'var(--sl-color-gray-5)' },
@@ -57,7 +60,14 @@ const variants: Record<DemoButtonVariant, { normal: CSSProperties; hover: CSSPro
   },
 };
 
-export function DemoButton({ children, onClick, variant = 'default', active = false, disabled, style }: DemoButtonProps) {
+export function DemoButton({
+  children,
+  onClick,
+  variant = 'default',
+  active = false,
+  disabled,
+  style,
+}: DemoButtonProps) {
   const v = variants[variant];
   const merged: CSSProperties = {
     ...base,
diff --git a/packages/site/src/components/demos/DemoWrapper.tsx b/packages/site/src/components/demos/DemoWrapper.tsx
index c948462..7a27c4f 100644
--- a/packages/site/src/components/demos/DemoWrapper.tsx
+++ b/packages/site/src/components/demos/DemoWrapper.tsx
@@ -14,7 +14,15 @@ class DemoErrorBoundary extends Component<{ children: ReactNode }, ErrorBoundary
   render() {
     if (this.state.error) {
       return (
-        <div style={{ padding: '1rem', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 8, color: '#991b1b' }}>
+        <div
+          style={{
+            padding: '1rem',
+            background: '#fef2f2',
+            border: '1px solid #fecaca',
+            borderRadius: 8,
+            color: '#991b1b',
+          }}
+        >
           <strong>Demo error:</strong> {this.state.error.message}
         </div>
       );
@@ -37,40 +45,52 @@ export function DemoWrapper({ title, description, height = 400, children }: Demo
   const descColor = 'var(--sl-color-gray-2)';
 
   return (
-    <div style={{
-      margin: '1.5rem 0',
-      border: `1px solid ${border}`,
-      borderRadius: 10,
-      overflow: 'hidden',
-      maxWidth: '100%',
-    }}>
+    <div
+      style={{
+        margin: '1.5rem 0',
+        border: `1px solid ${border}`,
+        borderRadius: 10,
+        overflow: 'hidden',
+        maxWidth: '100%',
+      }}
+    >
       {(title || description) && (
-        <div style={{
-          padding: '0.6rem 1rem',
-          borderBottom: `1px solid ${border}`,
-          background: headerBg,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          gap: '0.75rem',
-          minHeight: 40,
-        }}>
+        <div
+          style={{
+            padding: '0.6rem 1rem',
+            borderBottom: `1px solid ${border}`,
+            background: headerBg,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: '0.75rem',
+            minHeight: 40,
+          }}
+        >
           <div style={{ minWidth: 0, flex: 1 }}>
             {title && (
-              <div style={{
-                fontWeight: 600,
-                fontSize: '0.85rem',
-                color: titleColor,
-                letterSpacing: '-0.01em',
-              }}>{title}</div>
+              <div
+                style={{
+                  fontWeight: 600,
+                  fontSize: '0.85rem',
+                  color: titleColor,
+                  letterSpacing: '-0.01em',
+                }}
+              >
+                {title}
+              </div>
             )}
             {description && (
-              <div style={{
-                fontSize: '0.78rem',
-                color: descColor,
-                marginTop: title ? 2 : 0,
-                lineHeight: 1.4,
-              }}>{description}</div>
+              <div
+                style={{
+                  fontSize: '0.78rem',
+                  color: descColor,
+                  marginTop: title ? 2 : 0,
+                  lineHeight: 1.4,
+                }}
+              >
+                {description}
+              </div>
             )}
           </div>
         </div>
diff --git a/packages/site/src/components/demos/EditingDemo.tsx b/packages/site/src/components/demos/EditingDemo.tsx
index 4d3ade7..d22366b 100644
--- a/packages/site/src/components/demos/EditingDemo.tsx
+++ b/packages/site/src/components/demos/EditingDemo.tsx
@@ -6,20 +6,34 @@ import { generateEmployees, employeeColumns } from './generate-data';
 import { useSiteTheme } from './useSiteTheme';
 
 const data = generateEmployees(30);
-const editableColumns = employeeColumns.map(col => ({ ...col, editable: true }));
+const editableColumns = employeeColumns.map((col) => ({ ...col, editable: true }));
 
 export function EditingDemo() {
   const { witTheme } = useSiteTheme();
   const [lastEdit, setLastEdit] = useState('Double-click or press F2 to edit a cell');
 
   const handleCellChange = (event: CellChangeEvent) => {
-    setLastEdit(`Edited row ${event.row}, col ${event.col}: "${event.oldValue}" → "${event.value}"`);
+    setLastEdit(
+      `Edited row ${event.row}, col ${event.col}: "${event.oldValue}" → "${event.value}"`,
+    );
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Double-click or press F2 to edit. Enter to commit, Escape to cancel." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Double-click or press F2 to edit. Enter to commit, Escape to cancel."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', fontSize: '0.8rem', color: '#64748b', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            fontSize: '0.8rem',
+            color: '#64748b',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+          }}
+        >
           {lastEdit}
         </div>
         <div style={{ flex: 1 }}>
diff --git a/packages/site/src/components/demos/EventBusDemo.tsx b/packages/site/src/components/demos/EventBusDemo.tsx
index 9379808..220964c 100644
--- a/packages/site/src/components/demos/EventBusDemo.tsx
+++ b/packages/site/src/components/demos/EventBusDemo.tsx
@@ -7,7 +7,7 @@ import { generateEmployees, employeeColumns } from './generate-data';
 import { useSiteTheme } from './useSiteTheme';
 
 const data = generateEmployees(30);
-const sortableColumns = employeeColumns.map(col => ({ ...col, sortable: true }));
+const sortableColumns = employeeColumns.map((col) => ({ ...col, sortable: true }));
 
 const EVENT_COLORS: Record<string, string> = {
   cellClick: '#2563eb',
@@ -38,18 +38,24 @@ export function EventBusDemo() {
 
     const logEvent = (name: string, detail: string) => {
       const time = new Date().toLocaleTimeString('en', { hour12: false });
-      setEvents(prev => [...prev.slice(-49), { time, name, detail }]);
+      setEvents((prev) => [...prev.slice(-49), { time, name, detail }]);
     };
 
     const unsubs = [
       bus.on('cellClick', (e: any) => logEvent('cellClick', `row:${e.row} col:${e.col}`)),
-      bus.on('cellChange', (e: any) => logEvent('cellChange', `[${e.row},${e.col}] "${e.oldValue}" → "${e.newValue}"`)),
-      bus.on('selectionChange', (e: any) => logEvent('selectionChange', `row:${e.selection.activeRow} col:${e.selection.activeCol}`)),
-      bus.on('scroll', (e: any) => logEvent('scroll', `top:${Math.round(e.scrollTop)} left:${Math.round(e.scrollLeft)}`)),
+      bus.on('cellChange', (e: any) =>
+        logEvent('cellChange', `[${e.row},${e.col}] "${e.oldValue}" → "${e.newValue}"`),
+      ),
+      bus.on('selectionChange', (e: any) =>
+        logEvent('selectionChange', `row:${e.selection.activeRow} col:${e.selection.activeCol}`),
+      ),
+      bus.on('scroll', (e: any) =>
+        logEvent('scroll', `top:${Math.round(e.scrollTop)} left:${Math.round(e.scrollLeft)}`),
+      ),
       bus.on('sortChange', (e: any) => logEvent('sortChange', `${e.sortColumns.length} column(s)`)),
     ];
 
-    return () => unsubs.forEach(fn => fn());
+    return () => unsubs.forEach((fn) => fn());
   }, []);
 
   useEffect(() => {
@@ -59,7 +65,11 @@ export function EventBusDemo() {
   }, [events]);
 
   return (
-    <DemoWrapper height={500} title="Live Demo" description="Interact with the table — click cells, edit values, sort columns, scroll. Events appear in the log below.">
+    <DemoWrapper
+      height={500}
+      title="Live Demo"
+      description="Interact with the table — click cells, edit values, sort columns, scroll. Events appear in the log below."
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <div style={{ flex: 1, minHeight: 0 }}>
           <Spreadsheet
@@ -73,23 +83,58 @@ export function EventBusDemo() {
           />
         </div>
         <div style={{ borderTop: '1px solid var(--sl-color-gray-5)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 8px', background: 'var(--sl-color-gray-6)', fontSize: 11 }}>
-            <span style={{ fontWeight: 600, color: 'var(--sl-color-white)' }}>Event Log ({events.length})</span>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '4px 8px',
+              background: 'var(--sl-color-gray-6)',
+              fontSize: 11,
+            }}
+          >
+            <span style={{ fontWeight: 600, color: 'var(--sl-color-white)' }}>
+              Event Log ({events.length})
+            </span>
             <DemoButton onClick={clearLog} style={{ padding: '2px 10px', fontSize: '0.72rem' }}>
               Clear
             </DemoButton>
           </div>
           <div
             ref={logRef}
-            style={{ height: 120, overflowY: 'auto', background: 'var(--sl-color-gray-7, var(--sl-color-gray-6))', padding: 8, fontFamily: 'monospace', fontSize: 11 }}
+            style={{
+              height: 120,
+              overflowY: 'auto',
+              background: 'var(--sl-color-gray-7, var(--sl-color-gray-6))',
+              padding: 8,
+              fontFamily: 'monospace',
+              fontSize: 11,
+            }}
           >
             {events.length === 0 && (
-              <div style={{ color: 'var(--sl-color-gray-3)', fontStyle: 'italic' }}>No events yet. Click a cell, edit a value, or scroll the table.</div>
+              <div style={{ color: 'var(--sl-color-gray-3)', fontStyle: 'italic' }}>
+                No events yet. Click a cell, edit a value, or scroll the table.
+              </div>
             )}
             {events.map((evt, i) => (
-              <div key={i} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: '18px' }}>
+              <div
+                key={i}
+                style={{
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  lineHeight: '18px',
+                }}
+              >
                 <span style={{ color: 'var(--sl-color-gray-3)' }}>[{evt.time}]</span>{' '}
-                <span style={{ color: EVENT_COLORS[evt.name] || 'var(--sl-color-white)', fontWeight: 600 }}>{evt.name}</span>
+                <span
+                  style={{
+                    color: EVENT_COLORS[evt.name] || 'var(--sl-color-white)',
+                    fontWeight: 600,
+                  }}
+                >
+                  {evt.name}
+                </span>
                 {': '}
                 <span style={{ color: 'var(--sl-color-gray-2)' }}>{evt.detail}</span>
               </div>
diff --git a/packages/site/src/components/demos/ExcelDemo.tsx b/packages/site/src/components/demos/ExcelDemo.tsx
index 18186b8..6a9a3bd 100644
--- a/packages/site/src/components/demos/ExcelDemo.tsx
+++ b/packages/site/src/components/demos/ExcelDemo.tsx
@@ -30,7 +30,9 @@ export function ExcelDemo() {
     try {
       setStatus('Exporting...');
       const buffer = await pluginRef.current.exportExcel({ sheetName: 'Employees' });
-      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const blob = new Blob([buffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
@@ -58,7 +60,11 @@ export function ExcelDemo() {
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Upload an .xlsx file or export the current table to Excel." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Upload an .xlsx file or export the current table to Excel."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
           <input
diff --git a/packages/site/src/components/demos/FilteringDemo.tsx b/packages/site/src/components/demos/FilteringDemo.tsx
index 2fc7e12..c861f32 100644
--- a/packages/site/src/components/demos/FilteringDemo.tsx
+++ b/packages/site/src/components/demos/FilteringDemo.tsx
@@ -7,7 +7,11 @@ import { generateEmployees, employeeColumns } from './generate-data';
 import { useSiteTheme } from './useSiteTheme';
 
 const data = generateEmployees(100);
-const filterableColumns = employeeColumns.map(col => ({ ...col, filterable: true, sortable: true }));
+const filterableColumns = employeeColumns.map((col) => ({
+  ...col,
+  filterable: true,
+  sortable: true,
+}));
 
 export function FilteringDemo() {
   const { witTheme } = useSiteTheme();
@@ -19,9 +23,21 @@ export function FilteringDemo() {
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Right-click a column header or click filter icons to apply filters. Combine with sorting." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Right-click a column header or click filter icons to apply filters. Combine with sorting."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', fontSize: '0.8rem', color: '#64748b', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            fontSize: '0.8rem',
+            color: '#64748b',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+          }}
+        >
           {filterInfo}
         </div>
         <div style={{ flex: 1 }}>
diff --git a/packages/site/src/components/demos/FormulaDemo.tsx b/packages/site/src/components/demos/FormulaDemo.tsx
index 77e0e68..4a6eb24 100644
--- a/packages/site/src/components/demos/FormulaDemo.tsx
+++ b/packages/site/src/components/demos/FormulaDemo.tsx
@@ -40,13 +40,20 @@ export function FormulaDemo() {
     const visibleCols = columns;
     for (let row = 0; row < data.length; row++) {
       const r = row + 1; // 1-based cell references
-      const formulas: [number, string][] = [[2, `=A${r}+B${r}`], [3, `=A${r}*B${r}`]];
+      const formulas: [number, string][] = [
+        [2, `=A${r}+B${r}`],
+        [3, `=A${r}*B${r}`],
+      ];
       for (const [col, formula] of formulas) {
         engine.setCell(row, col, formula);
         engine.getEventBus().emit('cellChange', {
-          row, col, value: formula,
+          row,
+          col,
+          value: formula,
           column: visibleCols[col],
-          oldValue: '', newValue: formula, source: 'edit' as const,
+          oldValue: '',
+          newValue: formula,
+          source: 'edit' as const,
         });
       }
     }
@@ -61,14 +68,25 @@ export function FormulaDemo() {
       height={380}
     >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', borderBottom: '1px solid #e2e8f0', flexShrink: 0, display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-          <span style={{
-            display: 'inline-block',
-            width: 8,
-            height: 8,
-            borderRadius: '50%',
-            background: active ? '#22c55e' : '#94a3b8',
-          }} />
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <span
+            style={{
+              display: 'inline-block',
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              background: active ? '#22c55e' : '#94a3b8',
+            }}
+          />
           <span style={{ fontSize: '0.8rem', color: '#64748b' }}>
             {active ? 'Formula Engine Active' : 'Initializing…'}
           </span>
diff --git a/packages/site/src/components/demos/FrozenPanesDemo.tsx b/packages/site/src/components/demos/FrozenPanesDemo.tsx
index ea1b056..e5d549f 100644
--- a/packages/site/src/components/demos/FrozenPanesDemo.tsx
+++ b/packages/site/src/components/demos/FrozenPanesDemo.tsx
@@ -8,7 +8,11 @@ const data = generateEmployees(100);
 export function FrozenPanesDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="Scroll to see row 1 and first 2 columns stay frozen in place." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Scroll to see row 1 and first 2 columns stay frozen in place."
+      height={440}
+    >
       <Spreadsheet
         theme={witTheme}
         columns={employeeColumns}
diff --git a/packages/site/src/components/demos/HeroDemo.tsx b/packages/site/src/components/demos/HeroDemo.tsx
index 14fc0aa..5bf52de 100644
--- a/packages/site/src/components/demos/HeroDemo.tsx
+++ b/packages/site/src/components/demos/HeroDemo.tsx
@@ -12,30 +12,116 @@ const columns: ColumnDef[] = [
 ];
 
 const data = [
-  { product: 'Cloud Suite', region: 'North America', q1: 284500, q2: 312800, growth: 9.9, status: 'Active' },
-  { product: 'Analytics Pro', region: 'Europe', q1: 198200, q2: 215600, growth: 8.8, status: 'Active' },
-  { product: 'SecureVault', region: 'Asia Pacific', q1: 156800, q2: 178400, growth: 13.8, status: 'Active' },
-  { product: 'DataSync', region: 'North America', q1: 142300, q2: 139700, growth: -1.8, status: 'Review' },
-  { product: 'Cloud Suite', region: 'Europe', q1: 221400, q2: 248900, growth: 12.4, status: 'Active' },
-  { product: 'EdgeCompute', region: 'Asia Pacific', q1: 89500, q2: 112300, growth: 25.5, status: 'Active' },
-  { product: 'Analytics Pro', region: 'Latin America', q1: 67800, q2: 74200, growth: 9.4, status: 'Pipeline' },
-  { product: 'SecureVault', region: 'Europe', q1: 134600, q2: 151200, growth: 12.3, status: 'Active' },
-  { product: 'DataSync', region: 'Asia Pacific', q1: 98400, q2: 105800, growth: 7.5, status: 'Active' },
-  { product: 'EdgeCompute', region: 'North America', q1: 176200, q2: 198500, growth: 12.7, status: 'Active' },
-  { product: 'Cloud Suite', region: 'Latin America', q1: 54300, q2: 68700, growth: 26.5, status: 'Pipeline' },
-  { product: 'Analytics Pro', region: 'North America', q1: 245100, q2: 267300, growth: 9.1, status: 'Active' },
+  {
+    product: 'Cloud Suite',
+    region: 'North America',
+    q1: 284500,
+    q2: 312800,
+    growth: 9.9,
+    status: 'Active',
+  },
+  {
+    product: 'Analytics Pro',
+    region: 'Europe',
+    q1: 198200,
+    q2: 215600,
+    growth: 8.8,
+    status: 'Active',
+  },
+  {
+    product: 'SecureVault',
+    region: 'Asia Pacific',
+    q1: 156800,
+    q2: 178400,
+    growth: 13.8,
+    status: 'Active',
+  },
+  {
+    product: 'DataSync',
+    region: 'North America',
+    q1: 142300,
+    q2: 139700,
+    growth: -1.8,
+    status: 'Review',
+  },
+  {
+    product: 'Cloud Suite',
+    region: 'Europe',
+    q1: 221400,
+    q2: 248900,
+    growth: 12.4,
+    status: 'Active',
+  },
+  {
+    product: 'EdgeCompute',
+    region: 'Asia Pacific',
+    q1: 89500,
+    q2: 112300,
+    growth: 25.5,
+    status: 'Active',
+  },
+  {
+    product: 'Analytics Pro',
+    region: 'Latin America',
+    q1: 67800,
+    q2: 74200,
+    growth: 9.4,
+    status: 'Pipeline',
+  },
+  {
+    product: 'SecureVault',
+    region: 'Europe',
+    q1: 134600,
+    q2: 151200,
+    growth: 12.3,
+    status: 'Active',
+  },
+  {
+    product: 'DataSync',
+    region: 'Asia Pacific',
+    q1: 98400,
+    q2: 105800,
+    growth: 7.5,
+    status: 'Active',
+  },
+  {
+    product: 'EdgeCompute',
+    region: 'North America',
+    q1: 176200,
+    q2: 198500,
+    growth: 12.7,
+    status: 'Active',
+  },
+  {
+    product: 'Cloud Suite',
+    region: 'Latin America',
+    q1: 54300,
+    q2: 68700,
+    growth: 26.5,
+    status: 'Pipeline',
+  },
+  {
+    product: 'Analytics Pro',
+    region: 'North America',
+    q1: 245100,
+    q2: 267300,
+    growth: 9.1,
+    status: 'Active',
+  },
 ];
 
 export function HeroDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <div style={{
-      borderRadius: '8px',
-      boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
-      overflow: 'hidden',
-      width: '100%',
-      height: '100%',
-    }}>
+    <div
+      style={{
+        borderRadius: '8px',
+        boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
+        overflow: 'hidden',
+        width: '100%',
+        height: '100%',
+      }}
+    >
       <Spreadsheet
         theme={witTheme}
         columns={columns}
diff --git a/packages/site/src/components/demos/KeyboardNavDemo.tsx b/packages/site/src/components/demos/KeyboardNavDemo.tsx
index b37d3f5..bec1c4c 100644
--- a/packages/site/src/components/demos/KeyboardNavDemo.tsx
+++ b/packages/site/src/components/demos/KeyboardNavDemo.tsx
@@ -8,7 +8,10 @@ const data = generateEmployees(50);
 export function KeyboardNavDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="Click a cell, then use Arrow keys, Tab, Enter, Home/End, Ctrl+Home/End, Page Up/Down.">
+    <DemoWrapper
+      title="Live Demo"
+      description="Click a cell, then use Arrow keys, Tab, Enter, Home/End, Ctrl+Home/End, Page Up/Down."
+    >
       <Spreadsheet
         theme={witTheme}
         columns={employeeColumns}
diff --git a/packages/site/src/components/demos/MergingDemo.tsx b/packages/site/src/components/demos/MergingDemo.tsx
index f5608a1..b09a1cb 100644
--- a/packages/site/src/components/demos/MergingDemo.tsx
+++ b/packages/site/src/components/demos/MergingDemo.tsx
@@ -22,7 +22,11 @@ export function MergingDemo() {
   }, []);
 
   return (
-    <DemoWrapper title="Live Demo" description="Three merged regions shown: vertical (rows 1-3 in Department), horizontal (row 5 across Name-Salary), and vertical (rows 8-10 in ID)." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Three merged regions shown: vertical (rows 1-3 in Department), horizontal (row 5 across Name-Salary), and vertical (rows 8-10 in ID)."
+      height={440}
+    >
       <Spreadsheet
         theme={witTheme}
         ref={tableRef}
diff --git a/packages/site/src/components/demos/MillionRowsDemo.tsx b/packages/site/src/components/demos/MillionRowsDemo.tsx
index 1fa535a..5f6dba3 100644
--- a/packages/site/src/components/demos/MillionRowsDemo.tsx
+++ b/packages/site/src/components/demos/MillionRowsDemo.tsx
@@ -12,7 +12,14 @@ const TARGET_ROWS = 1_000_000;
 const columns: ColumnDef[] = [
   { key: 'id', title: 'ID', width: 70, type: 'number', sortable: true },
   { key: 'name', title: 'Name', width: 160, type: 'string', sortable: true, filterable: true },
-  { key: 'department', title: 'Department', width: 130, type: 'string', sortable: true, filterable: true },
+  {
+    key: 'department',
+    title: 'Department',
+    width: 130,
+    type: 'string',
+    sortable: true,
+    filterable: true,
+  },
   { key: 'salary', title: 'Salary', width: 100, type: 'number', sortable: true },
   { key: 'city', title: 'City', width: 120, type: 'string', sortable: true, filterable: true },
   { key: 'startDate', title: 'Start Date', width: 110, type: 'date', sortable: true },
@@ -21,9 +28,50 @@ const columns: ColumnDef[] = [
 
 const COLUMN_KEYS = columns.map((c) => c.key);
 
-const FIRST_NAMES = ['Alice', 'Bob', 'Carol', 'David', 'Eva', 'Frank', 'Grace', 'Henry', 'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul', 'Quinn', 'Rita', 'Sam', 'Tina'];
-const LAST_NAMES = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor'];
-const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Design', 'Support', 'Legal'];
+const FIRST_NAMES = [
+  'Alice',
+  'Bob',
+  'Carol',
+  'David',
+  'Eva',
+  'Frank',
+  'Grace',
+  'Henry',
+  'Iris',
+  'Jack',
+  'Karen',
+  'Leo',
+  'Mona',
+  'Nick',
+  'Olivia',
+  'Paul',
+  'Quinn',
+  'Rita',
+  'Sam',
+  'Tina',
+];
+const LAST_NAMES = [
+  'Smith',
+  'Johnson',
+  'Williams',
+  'Brown',
+  'Jones',
+  'Davis',
+  'Miller',
+  'Wilson',
+  'Moore',
+  'Taylor',
+];
+const DEPARTMENTS = [
+  'Engineering',
+  'Marketing',
+  'Sales',
+  'HR',
+  'Finance',
+  'Design',
+  'Support',
+  'Legal',
+];
 const CITIES = ['New York', 'London', 'Tokyo', 'Berlin', 'Paris', 'Sydney', 'Toronto', 'Singapore'];
 
 // Stable reference — prevents React useEffect from wiping CellStore on re-renders
@@ -122,10 +170,30 @@ export function MillionRowsDemo({ height = 500 }: MillionRowsDemoProps) {
 
   if (!active) {
     return (
-      <DemoWrapper title="1,000,000 Rows Demo" description="Canvas virtual scrolling renders only visible rows — constant 60 FPS regardless of dataset size." height={height}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '1rem', padding: '2rem' }}>
-          <div style={{ fontSize: '3rem', fontWeight: 700, color: 'var(--sl-color-accent, #3b82f6)' }}>1,000,000</div>
-          <div style={{ fontSize: '1.1rem', color: 'var(--sl-color-gray-2, #475569)' }}>rows rendered at 60 FPS</div>
+      <DemoWrapper
+        title="1,000,000 Rows Demo"
+        description="Canvas virtual scrolling renders only visible rows — constant 60 FPS regardless of dataset size."
+        height={height}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            gap: '1rem',
+            padding: '2rem',
+          }}
+        >
+          <div
+            style={{ fontSize: '3rem', fontWeight: 700, color: 'var(--sl-color-accent, #3b82f6)' }}
+          >
+            1,000,000
+          </div>
+          <div style={{ fontSize: '1.1rem', color: 'var(--sl-color-gray-2, #475569)' }}>
+            rows rendered at 60 FPS
+          </div>
           <DemoButton
             variant="primary"
             onClick={handleActivate}
@@ -133,7 +201,15 @@ export function MillionRowsDemo({ height = 500 }: MillionRowsDemoProps) {
           >
             ▶ Load 1M Rows
           </DemoButton>
-          <div style={{ fontSize: '0.8rem', color: 'var(--sl-color-gray-3, #94a3b8)', textAlign: 'center', maxWidth: 400, marginTop: '0.5rem' }}>
+          <div
+            style={{
+              fontSize: '0.8rem',
+              color: 'var(--sl-color-gray-3, #94a3b8)',
+              textAlign: 'center',
+              maxWidth: 400,
+              marginTop: '0.5rem',
+            }}
+          >
             Only visible rows are drawn on canvas. Scroll through a million rows with zero jank.
           </div>
         </div>
@@ -142,16 +218,13 @@ export function MillionRowsDemo({ height = 500 }: MillionRowsDemoProps) {
   }
 
   const fmt = new Intl.NumberFormat('en-US');
-  const desc = loadTime !== null
-    ? `Loaded in ${loadTime}ms · ${fmt.format(TARGET_ROWS)} rows · ${fps !== null ? fps + ' FPS' : 'Measuring...'}`
-    : `Loading ${fmt.format(loadedRows)} / ${fmt.format(TARGET_ROWS)} (${progress}%) · ${fps !== null ? fps + ' FPS' : ''}`;
+  const desc =
+    loadTime !== null
+      ? `Loaded in ${loadTime}ms · ${fmt.format(TARGET_ROWS)} rows · ${fps !== null ? fps + ' FPS' : 'Measuring...'}`
+      : `Loading ${fmt.format(loadedRows)} / ${fmt.format(TARGET_ROWS)} (${progress}%) · ${fps !== null ? fps + ' FPS' : ''}`;
 
   return (
-    <DemoWrapper
-      title="1,000,000 Rows — Live"
-      description={desc}
-      height={height}
-    >
+    <DemoWrapper title="1,000,000 Rows — Live" description={desc} height={height}>
       <Spreadsheet
         theme={witTheme}
         ref={tableRef}
@@ -169,33 +242,59 @@ export function MillionRowsDemo({ height = 500 }: MillionRowsDemoProps) {
 
 export function MillionRowsExplanation() {
   return (
-    <div style={{ padding: '1rem 0', fontSize: '0.9rem', lineHeight: 1.7, color: 'var(--sl-color-gray-1, #334155)' }}>
+    <div
+      style={{
+        padding: '1rem 0',
+        fontSize: '0.9rem',
+        lineHeight: 1.7,
+        color: 'var(--sl-color-gray-1, #334155)',
+      }}
+    >
       <h3 style={{ marginTop: 0 }}>How It Works</h3>
       <p>
-        @witqq/spreadsheet uses <strong>canvas-based virtual scrolling</strong> — only the rows visible in the viewport are
-        rendered on each frame. The engine calculates which rows are visible based on scroll position and row heights,
-        then draws only those cells on a single <code>&lt;canvas&gt;</code> element.
+        @witqq/spreadsheet uses <strong>canvas-based virtual scrolling</strong> — only the rows
+        visible in the viewport are rendered on each frame. The engine calculates which rows are
+        visible based on scroll position and row heights, then draws only those cells on a single{' '}
+        <code>&lt;canvas&gt;</code> element.
       </p>
       <p>
         The <strong>ProgressiveLoaderPlugin</strong> streams data in time-budgeted chunks using
-        <code>scheduler.yield()</code> (with <code>MessageChannel</code> fallback). Each chunk runs for ~50ms then yields
-        to the browser. The table is interactive immediately — you can scroll, sort, and filter
-        while remaining data loads. A progress overlay shows loading status.
+        <code>scheduler.yield()</code> (with <code>MessageChannel</code> fallback). Each chunk runs
+        for ~50ms then yields to the browser. The table is interactive immediately — you can scroll,
+        sort, and filter while remaining data loads. A progress overlay shows loading status.
       </p>
       <p>
         <strong>Why it's fast:</strong>
       </p>
       <ul>
-        <li><strong>O(viewport)</strong> rendering — drawing cost is proportional to visible rows (~30-50), not total rows (1M)</li>
-        <li><strong>Canvas 2D API</strong> — GPU-accelerated text and shape rendering, no DOM node creation per cell</li>
-        <li><strong>Float64Array layout</strong> — cumulative row positions in typed arrays for O(1) cell rect lookups and O(log n) scroll-to-row</li>
-        <li><strong>rAF coalescing</strong> — multiple changes within a frame produce a single render, via <code>requestAnimationFrame</code></li>
-        <li><strong>Text measurement cache</strong> — LRU cache (10K entries) avoids redundant <code>ctx.measureText()</code> calls</li>
-        <li><strong>Progressive loading</strong> — data streams in chunks without blocking the UI thread</li>
+        <li>
+          <strong>O(viewport)</strong> rendering — drawing cost is proportional to visible rows
+          (~30-50), not total rows (1M)
+        </li>
+        <li>
+          <strong>Canvas 2D API</strong> — GPU-accelerated text and shape rendering, no DOM node
+          creation per cell
+        </li>
+        <li>
+          <strong>Float64Array layout</strong> — cumulative row positions in typed arrays for O(1)
+          cell rect lookups and O(log n) scroll-to-row
+        </li>
+        <li>
+          <strong>rAF coalescing</strong> — multiple changes within a frame produce a single render,
+          via <code>requestAnimationFrame</code>
+        </li>
+        <li>
+          <strong>Text measurement cache</strong> — LRU cache (10K entries) avoids redundant{' '}
+          <code>ctx.measureText()</code> calls
+        </li>
+        <li>
+          <strong>Progressive loading</strong> — data streams in chunks without blocking the UI
+          thread
+        </li>
       </ul>
       <p>
-        The data array itself lives in memory (~200-400MB for 1M rows), but rendering performance is independent
-        of dataset size. Scroll at any speed — the frame budget stays under 16ms.
+        The data array itself lives in memory (~200-400MB for 1M rows), but rendering performance is
+        independent of dataset size. Scroll at any speed — the frame budget stays under 16ms.
       </p>
     </div>
   );
diff --git a/packages/site/src/components/demos/PluginShowcaseDemo.tsx b/packages/site/src/components/demos/PluginShowcaseDemo.tsx
index afe4590..9bf4aef 100644
--- a/packages/site/src/components/demos/PluginShowcaseDemo.tsx
+++ b/packages/site/src/components/demos/PluginShowcaseDemo.tsx
@@ -55,9 +55,13 @@ export function PluginShowcaseDemo() {
         const formula = `=A${row + 1}+B${row + 1}`;
         engine.setCell(row, 2, formula);
         engine.getEventBus().emit('cellChange', {
-          row, col: 2, value: formula,
+          row,
+          col: 2,
+          value: formula,
           column: columns[2],
-          oldValue: '', newValue: formula, source: 'edit' as const,
+          oldValue: '',
+          newValue: formula,
+          source: 'edit' as const,
         });
       }
       engine.requestRender();
@@ -83,8 +87,8 @@ export function PluginShowcaseDemo() {
             { value: 0, color: '#ef4444' },
             { value: 50, color: '#eab308' },
             { value: 100, color: '#22c55e' },
-          ]
-        )
+          ],
+        ),
       );
       condFormatPluginRef.current = plugin;
       engine.requestRender();
@@ -100,31 +104,23 @@ export function PluginShowcaseDemo() {
     >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
-          <DemoButton
-            variant="toggle"
-            active={formulaEnabled}
-            onClick={toggleFormula}
-          >
+          <DemoButton variant="toggle" active={formulaEnabled} onClick={toggleFormula}>
             Formula Plugin: {formulaEnabled ? 'ON' : 'OFF'}
           </DemoButton>
-          <DemoButton
-            variant="toggle"
-            active={condFormatEnabled}
-            onClick={toggleCondFormat}
-          >
+          <DemoButton variant="toggle" active={condFormatEnabled} onClick={toggleCondFormat}>
             Conditional Formatting: {condFormatEnabled ? 'ON' : 'OFF'}
           </DemoButton>
         </DemoToolbar>
         <div style={{ flex: 1 }}>
           <Spreadsheet
-        theme={witTheme}
-        ref={tableRef}
-        columns={columns}
-        data={initialData}
-        editable={true}
-        showRowNumbers={true}
-        style={{ width: '100%', height: '100%' }}
-      />
+            theme={witTheme}
+            ref={tableRef}
+            columns={columns}
+            data={initialData}
+            editable={true}
+            showRowNumbers={true}
+            style={{ width: '100%', height: '100%' }}
+          />
         </div>
       </div>
     </DemoWrapper>
diff --git a/packages/site/src/components/demos/PrintSupportDemo.tsx b/packages/site/src/components/demos/PrintSupportDemo.tsx
index a4da8ae..f3be328 100644
--- a/packages/site/src/components/demos/PrintSupportDemo.tsx
+++ b/packages/site/src/components/demos/PrintSupportDemo.tsx
@@ -14,7 +14,11 @@ export function PrintSupportDemo() {
   const tableRef = useRef<SpreadsheetRef>(null);
 
   return (
-    <DemoWrapper title="Live Demo" description="Click Print to generate an HTML table from canvas data and open the browser print dialog. Sorted/filtered data is respected." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Click Print to generate an HTML table from canvas data and open the browser print dialog. Sorted/filtered data is respected."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
           <DemoButton onClick={() => tableRef.current?.print()}>🖨️ Print Table</DemoButton>
diff --git a/packages/site/src/components/demos/ResizeDemo.tsx b/packages/site/src/components/demos/ResizeDemo.tsx
index c6cd149..a420c4f 100644
--- a/packages/site/src/components/demos/ResizeDemo.tsx
+++ b/packages/site/src/components/demos/ResizeDemo.tsx
@@ -8,7 +8,14 @@ const data = generateEmployees(50);
 
 const resizableColumns: ColumnDef[] = [
   { key: 'id', title: 'ID', width: 60, type: 'number', resizable: false },
-  { key: 'name', title: 'Name (resizable)', width: 160, minWidth: 80, maxWidth: 400, resizable: true },
+  {
+    key: 'name',
+    title: 'Name (resizable)',
+    width: 160,
+    minWidth: 80,
+    maxWidth: 400,
+    resizable: true,
+  },
   { key: 'department', title: 'Department', width: 130, minWidth: 60, resizable: true },
   { key: 'salary', title: 'Salary', width: 100, type: 'number', minWidth: 60, resizable: true },
   { key: 'city', title: 'City', width: 120, minWidth: 60, maxWidth: 300, resizable: true },
@@ -19,7 +26,11 @@ const resizableColumns: ColumnDef[] = [
 export function ResizeDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="Drag column header borders to resize. ID column is locked. Row borders in the row-number gutter can also be dragged." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Drag column header borders to resize. ID column is locked. Row borders in the row-number gutter can also be dragged."
+      height={440}
+    >
       <Spreadsheet
         theme={witTheme}
         columns={resizableColumns}
diff --git a/packages/site/src/components/demos/RowGroupingDemo.tsx b/packages/site/src/components/demos/RowGroupingDemo.tsx
index a92617d..d035fa5 100644
--- a/packages/site/src/components/demos/RowGroupingDemo.tsx
+++ b/packages/site/src/components/demos/RowGroupingDemo.tsx
@@ -32,7 +32,9 @@ const data = [
 export function RowGroupingDemo() {
   const { witTheme } = useSiteTheme();
   const tableRef = useRef<SpreadsheetRef>(null);
-  const [info, setInfo] = useState('3 groups: Electronics (3 items), Clothing (4 items), Food (2 items)');
+  const [info, setInfo] = useState(
+    '3 groups: Electronics (3 items), Clothing (4 items), Food (2 items)',
+  );
 
   useEffect(() => {
     const engine = tableRef.current?.getInstance();
@@ -57,13 +59,18 @@ export function RowGroupingDemo() {
     const engine = tableRef.current?.getInstance();
     if (!engine) return;
     const rgm = engine.getRowGroupManager();
-    if (expand) rgm.expandAll(); else rgm.collapseAll();
+    if (expand) rgm.expandAll();
+    else rgm.collapseAll();
     engine.requestRender();
     setInfo(expand ? 'All groups expanded' : 'All groups collapsed');
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Click group headers to expand/collapse. Sales and Revenue show sum aggregates for each group." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Click group headers to expand/collapse. Sales and Revenue show sum aggregates for each group."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
           <DemoButton onClick={() => handleToggleAll(true)}>➕ Expand All</DemoButton>
diff --git a/packages/site/src/components/demos/SelectionDemo.tsx b/packages/site/src/components/demos/SelectionDemo.tsx
index 1602fa7..fb2abe5 100644
--- a/packages/site/src/components/demos/SelectionDemo.tsx
+++ b/packages/site/src/components/demos/SelectionDemo.tsx
@@ -19,9 +19,21 @@ export function SelectionDemo() {
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Click cells, use Shift+Click for ranges, Ctrl+Click for multi-select." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Click cells, use Shift+Click for ranges, Ctrl+Click for multi-select."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', fontSize: '0.8rem', color: '#64748b', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            fontSize: '0.8rem',
+            color: '#64748b',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+          }}
+        >
           {selection}
         </div>
         <div style={{ flex: 1 }}>
diff --git a/packages/site/src/components/demos/SortingDemo.tsx b/packages/site/src/components/demos/SortingDemo.tsx
index e9caf12..4d7d7fb 100644
--- a/packages/site/src/components/demos/SortingDemo.tsx
+++ b/packages/site/src/components/demos/SortingDemo.tsx
@@ -7,7 +7,7 @@ import { generateEmployees, employeeColumns } from './generate-data';
 import { useSiteTheme } from './useSiteTheme';
 
 const data = generateEmployees(100);
-const sortableColumns = employeeColumns.map(col => ({ ...col, sortable: true }));
+const sortableColumns = employeeColumns.map((col) => ({ ...col, sortable: true }));
 
 export function SortingDemo() {
   const { witTheme } = useSiteTheme();
@@ -19,15 +19,29 @@ export function SortingDemo() {
     if (cols.length === 0) {
       setSortInfo('No sort applied');
     } else {
-      const desc = cols.map(s => `${sortableColumns[s.col]?.title ?? `col ${s.col}`} (${s.direction})`).join(', ');
+      const desc = cols
+        .map((s) => `${sortableColumns[s.col]?.title ?? `col ${s.col}`} (${s.direction})`)
+        .join(', ');
       setSortInfo(`Sorted by: ${desc}`);
     }
   };
 
   return (
-    <DemoWrapper title="Live Demo" description="Click headers to sort. Hold Shift and click another header for multi-column sort." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Click headers to sort. Hold Shift and click another header for multi-column sort."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '0.5rem 0.75rem', fontSize: '0.8rem', color: '#64748b', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            fontSize: '0.8rem',
+            color: '#64748b',
+            borderBottom: '1px solid #e2e8f0',
+            flexShrink: 0,
+          }}
+        >
           {sortInfo}
         </div>
         <div style={{ flex: 1 }}>
diff --git a/packages/site/src/components/demos/ThemeSwitcherDemo.tsx b/packages/site/src/components/demos/ThemeSwitcherDemo.tsx
index d661068..1eac942 100644
--- a/packages/site/src/components/demos/ThemeSwitcherDemo.tsx
+++ b/packages/site/src/components/demos/ThemeSwitcherDemo.tsx
@@ -12,10 +12,14 @@ export function ThemeSwitcherDemo() {
   const [isDark, setIsDark] = useState(false);
 
   return (
-    <DemoWrapper title="Live Demo" description="Toggle between light and dark themes. Theme change propagates to all subsystems instantly." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Toggle between light and dark themes. Theme change propagates to all subsystems instantly."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
-          <DemoButton onClick={() => setIsDark(d => !d)}>
+          <DemoButton onClick={() => setIsDark((d) => !d)}>
             {isDark ? '☀️ Light Theme' : '🌙 Dark Theme'}
           </DemoButton>
         </DemoToolbar>
diff --git a/packages/site/src/components/demos/UndoRedoDemo.tsx b/packages/site/src/components/demos/UndoRedoDemo.tsx
index a6ede7a..e789ea5 100644
--- a/packages/site/src/components/demos/UndoRedoDemo.tsx
+++ b/packages/site/src/components/demos/UndoRedoDemo.tsx
@@ -17,11 +17,15 @@ export function UndoRedoDemo() {
   const handleUndo = useCallback(() => tableRef.current?.undo(), []);
   const handleRedo = useCallback(() => tableRef.current?.redo(), []);
   const handleCellChange = useCallback((_event: CellChangeEvent) => {
-    setEditCount(prev => prev + 1);
+    setEditCount((prev) => prev + 1);
   }, []);
 
   return (
-    <DemoWrapper title="Live Demo" description="Double-click to edit cells. Use the buttons or Ctrl+Z / Ctrl+Y to undo and redo." height={440}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Double-click to edit cells. Use the buttons or Ctrl+Z / Ctrl+Y to undo and redo."
+      height={440}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <DemoToolbar>
           <DemoButton onClick={handleUndo}>↩ Undo</DemoButton>
diff --git a/packages/site/src/components/demos/ValidationDemo.tsx b/packages/site/src/components/demos/ValidationDemo.tsx
index 60c924b..c2112d5 100644
--- a/packages/site/src/components/demos/ValidationDemo.tsx
+++ b/packages/site/src/components/demos/ValidationDemo.tsx
@@ -4,25 +4,75 @@ import { DemoWrapper } from './DemoWrapper';
 import { useSiteTheme } from './useSiteTheme';
 
 const columns: ColumnDef[] = [
-  { key: 'name', title: 'Name', width: 160, validation: [{ type: 'required', message: 'Name is required', severity: 'error' }] },
-  { key: 'email', title: 'Email', width: 200, validation: [{ type: 'required', message: 'Email is required', severity: 'error' }, { type: 'regex', pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$', message: 'Invalid email format', severity: 'error' }] },
-  { key: 'age', title: 'Age', width: 80, type: 'number', validation: [{ type: 'range', min: 0, max: 150, message: 'Age must be 0-150', severity: 'error' }] },
-  { key: 'salary', title: 'Salary', width: 100, type: 'number', validation: [{ type: 'range', min: 0, max: 1000000, message: 'Salary must be 0-1M', severity: 'warning' }] },
+  {
+    key: 'name',
+    title: 'Name',
+    width: 160,
+    validation: [{ type: 'required', message: 'Name is required', severity: 'error' }],
+  },
+  {
+    key: 'email',
+    title: 'Email',
+    width: 200,
+    validation: [
+      { type: 'required', message: 'Email is required', severity: 'error' },
+      {
+        type: 'regex',
+        pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
+        message: 'Invalid email format',
+        severity: 'error',
+      },
+    ],
+  },
+  {
+    key: 'age',
+    title: 'Age',
+    width: 80,
+    type: 'number',
+    validation: [
+      { type: 'range', min: 0, max: 150, message: 'Age must be 0-150', severity: 'error' },
+    ],
+  },
+  {
+    key: 'salary',
+    title: 'Salary',
+    width: 100,
+    type: 'number',
+    validation: [
+      { type: 'range', min: 0, max: 1000000, message: 'Salary must be 0-1M', severity: 'warning' },
+    ],
+  },
   { key: 'department', title: 'Department', width: 130 },
 ];
 
 const data = [
-  { name: 'Alice Smith', email: 'alice@example.com', age: 30, salary: 75000, department: 'Engineering' },
+  {
+    name: 'Alice Smith',
+    email: 'alice@example.com',
+    age: 30,
+    salary: 75000,
+    department: 'Engineering',
+  },
   { name: '', email: 'invalid-email', age: -5, salary: 50000, department: 'Sales' },
   { name: 'Carol Brown', email: '', age: 200, salary: 2000000, department: 'HR' },
-  { name: 'David Jones', email: 'david@example.com', age: 45, salary: 90000, department: 'Finance' },
+  {
+    name: 'David Jones',
+    email: 'david@example.com',
+    age: 45,
+    salary: 90000,
+    department: 'Finance',
+  },
   { name: '', email: '', age: 0, salary: 0, department: '' },
 ];
 
 export function ValidationDemo() {
   const { witTheme } = useSiteTheme();
   return (
-    <DemoWrapper title="Live Demo" description="Row 2 has invalid email and negative age. Row 3 has missing email, age >150, and salary warning. Hover over error cells to see tooltips." height={300}>
+    <DemoWrapper
+      title="Live Demo"
+      description="Row 2 has invalid email and negative age. Row 3 has missing email, age >150, and salary warning. Hover over error cells to see tooltips."
+      height={300}
+    >
       <Spreadsheet
         theme={witTheme}
         columns={columns}
diff --git a/packages/site/src/components/demos/generate-data.ts b/packages/site/src/components/demos/generate-data.ts
index 7894ec1..585bd36 100644
--- a/packages/site/src/components/demos/generate-data.ts
+++ b/packages/site/src/components/demos/generate-data.ts
@@ -1,8 +1,49 @@
 import type { ColumnDef } from '@witqq/spreadsheet';
 
-const FIRST_NAMES = ['Alice', 'Bob', 'Carol', 'David', 'Eva', 'Frank', 'Grace', 'Henry', 'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul', 'Quinn', 'Rita', 'Sam', 'Tina'];
-const LAST_NAMES = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor'];
-const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Design', 'Support', 'Legal'];
+const FIRST_NAMES = [
+  'Alice',
+  'Bob',
+  'Carol',
+  'David',
+  'Eva',
+  'Frank',
+  'Grace',
+  'Henry',
+  'Iris',
+  'Jack',
+  'Karen',
+  'Leo',
+  'Mona',
+  'Nick',
+  'Olivia',
+  'Paul',
+  'Quinn',
+  'Rita',
+  'Sam',
+  'Tina',
+];
+const LAST_NAMES = [
+  'Smith',
+  'Johnson',
+  'Williams',
+  'Brown',
+  'Jones',
+  'Davis',
+  'Miller',
+  'Wilson',
+  'Moore',
+  'Taylor',
+];
+const DEPARTMENTS = [
+  'Engineering',
+  'Marketing',
+  'Sales',
+  'HR',
+  'Finance',
+  'Design',
+  'Support',
+  'Legal',
+];
 const CITIES = ['New York', 'London', 'Tokyo', 'Berlin', 'Paris', 'Sydney', 'Toronto', 'Singapore'];
 
 function seededRandom(seed: number) {
diff --git a/packages/site/src/content/docs/api/cell-types.mdx b/packages/site/src/content/docs/api/cell-types.mdx
index f0b4649..4cef965 100644
--- a/packages/site/src/content/docs/api/cell-types.mdx
+++ b/packages/site/src/content/docs/api/cell-types.mdx
@@ -26,6 +26,7 @@ type CellType =
   | 'number'
   | 'boolean'
   | 'date'
+  | 'datetime'
   | 'select'
   | 'dynamicSelect'
   | 'formula'
@@ -65,6 +66,12 @@ interface CellTypeRenderer {
     height: number,
     theme: SpreadsheetTheme
   ) => void;
+  measureHeight?: (
+    ctx: CanvasRenderingContext2D,
+    value: CellValue,
+    width: number,
+    theme: SpreadsheetTheme
+  ) => number;
 }
 ```
 
@@ -73,6 +80,7 @@ interface CellTypeRenderer {
 | `format(value)` | Convert a `CellValue` to display string |
 | `align` | Text alignment within the cell |
 | `render` | Optional custom canvas drawing (bypasses default text rendering) |
+| `measureHeight` | Optional height measurement for auto row sizing |
 
 ## Built-in Renderers
 
@@ -81,7 +89,7 @@ interface CellTypeRenderer {
 | `string` | left | Returns value as-is (`String(value)`) |
 | `number` | right | Locale-formatted number (`toLocaleString()`) |
 | `boolean` | center | Renders a checkbox glyph via custom `render` |
-| `date` | left | `toLocaleDateString()` for Date values |
+| `date` | left | `toLocaleDateString()` for Date values. See [Date Editors](/guides/date-editors/) |
 
 ## CellTypeRegistry
 
diff --git a/packages/site/src/content/docs/api/types.mdx b/packages/site/src/content/docs/api/types.mdx
index 8534cab..ba72ce1 100644
--- a/packages/site/src/content/docs/api/types.mdx
+++ b/packages/site/src/content/docs/api/types.mdx
@@ -47,7 +47,7 @@ interface CellMetadata {
 
 ```typescript
 type CellType =
-  | 'string' | 'number' | 'boolean' | 'date'
+  | 'string' | 'number' | 'boolean' | 'date' | 'datetime'
   | 'select' | 'dynamicSelect' | 'formula'
   | 'link' | 'image' | 'progressBar' | 'rating' | 'badge'
   | 'custom';
@@ -149,6 +149,8 @@ interface ColumnDef {
   readonly editable?: boolean;   // Allow inline editing
   readonly resizable?: boolean;  // Allow drag-to-resize
   readonly hidden?: boolean;     // Hide from display and print
+  readonly wrapText?: boolean;   // Enable text wrapping
+  readonly validation?: SpreadsheetValidationRule[]; // Cell validation rules
 }
 ```
 
@@ -202,6 +204,14 @@ interface ValidationResult {
 }
 ```
 
+### SpreadsheetValidationRule
+
+```typescript
+type SpreadsheetValidationRule = RequiredRule | RangeRule | RegexRule | CustomRule;
+```
+
+Union of all built-in validation rule types. Used in `ColumnDef.validation` and the validation engine API.
+
 ## Theme Types
 
 ### SpreadsheetTheme
@@ -210,23 +220,37 @@ Theme controls all visual dimensions and colors. See [Themes & Styling](/concept
 
 ```typescript
 interface SpreadsheetTheme {
-  rowHeight: number;
-  headerHeight: number;
-  cellPadding: number;
-  rowNumberWidth: number;
+  name: string;
   colors: {
     background: string;
     cellText: string;
     cellBorder: string;
-    headerBg: string;
+    headerBackground: string;
     headerText: string;
-    selectionBg: string;
+    selectionFill: string;
     selectionBorder: string;
     // ... additional color tokens
   };
   fonts: {
     cell: string;
     header: string;
+    cellSize: number;
+    headerSize: number;
+  };
+  dimensions: {
+    rowHeight: number;
+    headerHeight: number;
+    cellPadding: number;
+    rowNumberWidth: number;
+    minColumnWidth: number;
+    scrollbarWidth: number;
+    borderWidth: number;
+  };
+  borders: {
+    gridLineWidth: number;
+    selectionWidth: number;
+    activeCellWidth: number;
+    frozenPaneWidth: number;
   };
 }
 ```
@@ -552,7 +576,7 @@ Top-level configuration for creating the `GridRenderer` render pipeline.
 type RenderMode = 'full' | 'light' | 'placeholder';
 ```
 
-Rendering fidelity level — `placeholder` during fast scroll, `full` when idle.
+Rendering fidelity level. Currently always `'full'`. The union type exists for future optimization.
 
 ### PaneRegion
 
diff --git a/packages/site/src/content/docs/concepts/data-model.mdx b/packages/site/src/content/docs/concepts/data-model.mdx
index 8969f03..cfb3753 100644
--- a/packages/site/src/content/docs/concepts/data-model.mdx
+++ b/packages/site/src/content/docs/concepts/data-model.mdx
@@ -29,7 +29,7 @@ cellStore.clearMetadata(5, 3);
 
 ```ts
 // Load a chunk of data from an array
-cellStore.bulkLoadChunk(data, columnKeys, startRow);
+cellStore.bulkLoadChunk(startRow, data, columnKeys);
 
 // Generate rows with a factory function
 cellStore.bulkGenerate(startRow, count, columnKeys, (index) => ({
@@ -53,12 +53,12 @@ Each stored cell is represented by a `CellData` object:
 
 ```ts
 interface CellData {
-  value: CellValue;            // Raw value: string | number | boolean | Date | null
-  displayValue?: string;       // Formatted text shown in the cell
-  formula?: string;            // Formula string (e.g., "=SUM(A1:A10)")
-  style?: CellStyleRef;        // Reference to a shared style in the StylePool
-  type?: CellType;             // Overrides column-level type
-  metadata?: CellMetadata;     // Status indicators, links, comments
+  readonly value: CellValue;            // Raw value: string | number | boolean | Date | null
+  readonly displayValue?: string;       // Formatted text shown in the cell
+  readonly formula?: string;            // Formula string (e.g., "=SUM(A1:A10)")
+  readonly style?: CellStyleRef;        // Reference to a shared style in the StylePool
+  readonly type?: CellType;             // Overrides column-level type
+  readonly metadata?: CellMetadata;     // Status indicators, links, comments
 }
 ```
 
@@ -71,6 +71,7 @@ The `value` field stores one of:
 | `string` | `"Hello"` | Plain text |
 | `number` | `42`, `3.14` | Numeric values |
 | `boolean` | `true`, `false` | Rendered as checkbox |
+| `Date` | `new Date()` | JavaScript Date object |
 | `null` | `null` | Empty cell |
 
 The `displayValue` is the formatted string used for canvas rendering. For example, a number `1234.5` might have a `displayValue` of `"1,234.50"` depending on formatting. If `displayValue` is not set, `value` is converted to string for rendering.
@@ -119,20 +120,21 @@ The `LayoutEngine` combines RowStore and ColStore to compute cell rectangles:
 
 ```ts
 interface CellRect {
-  x: number;      // Left edge in pixels
-  y: number;      // Top edge in pixels
-  width: number;  // Cell width in pixels
-  height: number; // Cell height in pixels
+  readonly x: number;      // Left edge in pixels
+  readonly y: number;      // Top edge in pixels
+  readonly width: number;  // Cell width in pixels
+  readonly height: number; // Cell height in pixels
 }
 
 // O(1) - direct array lookup
 const rect = layoutEngine.getCellRect(row, col);
 
 // O(log n) - binary search on cumulative array
-const { row, col } = layoutEngine.getCellAt(pixelX, pixelY);
+const row = layoutEngine.getRowAtY(pixelY);
+const col = layoutEngine.getColAtX(pixelX);
 ```
 
-The `getCellAt` method is used by `EventTranslator` for hit-testing — converting mouse click coordinates into cell addresses.
+The `getRowAtY` and `getColAtX` methods are used by `EventTranslator` for hit-testing — converting mouse click coordinates into cell addresses.
 
 ## StylePool
 
@@ -140,9 +142,9 @@ The `StylePool` deduplicates cell styles. When multiple cells share the same sty
 
 ```ts
 // Two cells with identical styles share one object
-const styleId = stylePool.intern({ fontWeight: 'bold', color: '#333' });
-cellA.style = stylePool.get(styleId);
-cellB.style = stylePool.get(styleId); // Same reference as cellA.style
+const styleId = stylePool.intern({ fontWeight: 'bold', textColor: '#333' });
+cellA.style = stylePool.resolve(styleId);
+cellB.style = stylePool.resolve(styleId); // Same reference as cellA.style
 ```
 
 This reduces memory usage significantly in tables where many cells share common formatting.
diff --git a/packages/site/src/content/docs/concepts/events.mdx b/packages/site/src/content/docs/concepts/events.mdx
index 0f9ab74..28a2157 100644
--- a/packages/site/src/content/docs/concepts/events.mdx
+++ b/packages/site/src/content/docs/concepts/events.mdx
@@ -24,13 +24,13 @@ All inter-subsystem communication in @witqq/spreadsheet goes through a typed `Ev
 const engine = tableRef.current?.getInstance();
 
 // Subscribe to an event
-const unsubscribe = engine.on('cellChange', (event) => {
+engine.on('cellChange', (event) => {
   console.log(`Cell [${event.row}, ${event.col}] changed`);
   console.log(`Old: ${event.oldValue}, New: ${event.newValue}`);
 });
 
 // Unsubscribe when done
-unsubscribe();
+engine.off('cellChange', handler);
 ```
 
 ## Event Reference
@@ -39,80 +39,80 @@ unsubscribe();
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `cellClick` | `{ row, col, originalEvent }` | Single click on a cell |
-| `cellDoubleClick` | `{ row, col, originalEvent }` | Double-click on a cell (opens editor) |
-| `cellChange` | `{ row, col, oldValue, newValue }` | Cell value changed after edit commit |
-| `cellStatusChange` | `{ row, col, status }` | Cell status lifecycle: changed → saving → saved, error |
-| `cellValidation` | `{ row, col, valid, errors }` | Validation result after cell edit |
+| `cellClick` | `{ row, col, value, column }` | Single click on a cell |
+| `cellDoubleClick` | `{ row, col, value, column }` | Double-click on a cell (opens editor) |
+| `cellChange` | `{ row, col, value, column, oldValue, newValue, source }` | Cell value changed after edit commit |
+| `cellStatusChange` | `{ row, col, oldStatus, newStatus, errorMessage? }` | Cell status lifecycle: changed → saving → saved, error |
+| `cellValidation` | `{ row, col, result }` | Validation result after cell edit |
 
 ### Selection Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `selectionChange` | `{ activeCell, ranges, anchor }` | Selection changed (click, keyboard, or programmatic) |
+| `selectionChange` | `{ selection, previousSelection }` | Selection changed (click, keyboard, or programmatic) |
 
 ### Scroll Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `scroll` | `{ scrollTop, scrollLeft, viewport }` | Scroll position changed |
+| `scroll` | `{ scrollTop, scrollLeft }` | Scroll position changed |
 
 ### Lifecycle Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `ready` | `{ engine }` | Engine initialization complete |
-| `destroy` | `{}` | Engine destroyed and resources cleaned up |
+| `ready` | *(none)* | Engine initialization complete |
+| `destroy` | *(none)* | Engine destroyed and resources cleaned up |
 
 ### Command Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `commandExecute` | `{ command }` | A command was executed |
-| `commandUndo` | `{ command }` | A command was undone |
-| `commandRedo` | `{ command }` | A command was redone |
+| `commandExecute` | `{ description }` | A command was executed |
+| `commandUndo` | `{ description }` | A command was undone |
+| `commandRedo` | `{ description }` | A command was redone |
 
 ### Clipboard Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `clipboardCopy` | `{ cells, text }` | Cells copied to clipboard |
-| `clipboardCut` | `{ cells, text }` | Cells cut to clipboard |
-| `clipboardPaste` | `{ cells, target }` | Data pasted from clipboard |
+| `clipboardCopy` | `{ rowCount, colCount }` | Cells copied to clipboard |
+| `clipboardCut` | `{ rowCount, colCount }` | Cells cut to clipboard |
+| `clipboardPaste` | `{ rowCount, colCount }` | Data pasted from clipboard |
 
 ### Resize Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `columnResizeStart` | `{ col, width }` | Column resize drag started |
-| `columnResize` | `{ col, width }` | Column width changing during drag |
-| `columnResizeEnd` | `{ col, oldWidth, newWidth }` | Column resize drag completed |
-| `rowResizeStart` | `{ row, height }` | Row resize drag started |
-| `rowResize` | `{ row, height }` | Row height changing during drag |
-| `rowResizeEnd` | `{ row, oldHeight, newHeight }` | Row resize drag completed |
+| `columnResizeStart` | `{ colIndex }` | Column resize drag started |
+| `columnResize` | `{ colIndex, oldWidth, newWidth }` | Column width changing during drag |
+| `columnResizeEnd` | `{ colIndex, oldWidth, newWidth }` | Column resize drag completed |
+| `rowResizeStart` | `{ rowIndex }` | Row resize drag started |
+| `rowResize` | `{ rowIndex, oldHeight, newHeight }` | Row height changing during drag |
+| `rowResizeEnd` | `{ rowIndex, oldHeight, newHeight }` | Row resize drag completed |
 
 ### Autofill Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `autofillStart` | `{ startCell, direction }` | Fill handle drag started |
-| `autofillPreview` | `{ range, values }` | Preview values during drag |
-| `autofillComplete` | `{ range, values }` | Fill operation completed |
+| `autofillStart` | `{ sourceRange }` | Fill handle drag started |
+| `autofillPreview` | `{ sourceRange, fillRange, direction }` | Preview values during drag |
+| `autofillComplete` | `{ sourceRange, fillRange, direction }` | Fill operation completed |
 
 ### Sort & Filter Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `sortChange` | `{ columns }` | Sort configuration changed |
-| `sortRejected` | `{ column, reason }` | Sort request rejected |
-| `filterChange` | `{ filters }` | Filter configuration changed |
+| `sortChange` | `{ sortColumns }` | Sort configuration changed |
+| `sortRejected` | `{ reason }` | Sort request rejected |
+| `filterChange` | `{ visibleRowCount, totalRowCount }` | Filter configuration changed |
 
 ### Group Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `rowGroupToggle` | `{ groupKey, expanded }` | Row group expanded/collapsed |
-| `rowGroupChange` | `{ groups }` | Row grouping configuration changed |
+| `rowGroupToggle` | `{ headerRow, expanded }` | Row group expanded/collapsed |
+| `rowGroupChange` | `{ groupHeaders }` | Row grouping configuration changed |
 
 ### Theme Events
 
@@ -137,6 +137,18 @@ interface CellEvent {
 }
 ```
 
+### CellChangeEvent
+
+Fired on `cellChange`. Extends `CellEvent` with old/new value tracking.
+
+```ts
+interface CellChangeEvent extends CellEvent {
+  oldValue: CellValue;
+  newValue: CellValue;
+  source: string;
+}
+```
+
 ### CommandEvent
 
 Fired on `commandExecute`, `commandUndo`, and `commandRedo`.
@@ -147,6 +159,17 @@ interface CommandEvent {
 }
 ```
 
+### SelectionChangeEvent
+
+Fired on `selectionChange`.
+
+```ts
+interface SelectionChangeEvent {
+  selection: Selection;
+  previousSelection: Selection;
+}
+```
+
 ### ClipboardDataEvent
 
 Fired on `clipboardCopy`, `clipboardCut`, and `clipboardPaste`.
@@ -296,6 +319,40 @@ interface AutofillStartEvent {
 }
 ```
 
+### AutofillPreviewEvent
+
+Fired on `autofillPreview` during fill handle drag.
+
+```ts
+interface AutofillPreviewEvent {
+  sourceRange: CellRange;
+  fillRange: CellRange | null;
+  direction: FillDirection | null;
+}
+```
+
+### AutofillCompleteEvent
+
+Fired on `autofillComplete` when the fill operation is committed.
+
+```ts
+interface AutofillCompleteEvent {
+  sourceRange: CellRange;
+  fillRange: CellRange;
+  direction: FillDirection;
+}
+```
+
+### SortChangeEvent
+
+Fired on `sortChange` when sort configuration changes.
+
+```ts
+interface SortChangeEvent {
+  readonly sortColumns: readonly { col: number; direction: 'asc' | 'desc' }[];
+}
+```
+
 ## EventTranslator
 
 The `EventTranslator` converts raw DOM events (mouse clicks, touch, keyboard) into cell-level events. It performs hit-testing to determine which cell or region was interacted with.
@@ -334,10 +391,10 @@ In the React wrapper, events are exposed as props:
     // event.selection
   }}
   onSortChange={(event: SortChangeEvent) => {
-    // event.columns
+    // event.sortColumns
   }}
   onFilterChange={(event: FilterChangeEvent) => {
-    // event.filters
+    // event.visibleRowCount, event.totalRowCount
   }}
   onReady={() => {
     // Table mounted and ready
diff --git a/packages/site/src/content/docs/concepts/rendering.mdx b/packages/site/src/content/docs/concepts/rendering.mdx
index 7366ef4..8de2b72 100644
--- a/packages/site/src/content/docs/concepts/rendering.mdx
+++ b/packages/site/src/content/docs/concepts/rendering.mdx
@@ -14,15 +14,13 @@ The rendering system uses a composable layer architecture. Each layer is respons
 | Order | Layer | Description |
 |-------|-------|-------------|
 | 1 | BackgroundLayer | Fills cell backgrounds with alternating row colors |
-| 2 | GridLinesLayer | Draws horizontal and vertical grid lines |
-| 3 | HeaderLayer | Renders column headers with sort/filter indicators |
-| 4 | RowNumberLayer | Draws row numbers on the left side |
-| 5 | CellTextLayer | Renders cell text content with type-specific formatting |
-| 6 | SelectionOverlayLayer | Draws selection highlight and active cell border |
-| 7 | CellStatusLayer | Shows cell status indicators (changed, saving, saved, error) |
-| 8 | FillHandleLayer | Renders the fill handle square on the active cell |
-| 9 | EmptyStateLayer | Shows empty state placeholder when no data |
-| 10 | RowGroupToggleLayer | Renders expand/collapse toggles for row groups |
+| 2 | CellTextLayer | Renders cell text content with type-specific formatting |
+| 3 | CellStatusLayer | Shows cell status indicators (changed, saving, saved, error) |
+| 4 | EmptyStateLayer | Shows empty state placeholder when no data |
+| 5 | GridLinesLayer | Draws horizontal and vertical grid lines (conditional) |
+| 6 | HeaderLayer | Renders column headers with sort/filter indicators |
+| 7 | RowNumberLayer | Draws row numbers on the left side (conditional) |
+| 8 | SelectionOverlayLayer | Draws selection highlight and active cell border |
 
 Plugin layers (added via plugins, not part of core):
 - **ConditionalFormatLayer** — applies conditional formatting (gradients, data bars, icons)
@@ -32,17 +30,22 @@ Each layer implements the `RenderLayer` interface:
 
 ```ts
 interface RenderLayer {
-  name: string;
-  render(ctx: RenderContext): void;
+  render(rc: RenderContext): void;
+  measureHeights?(rc: RenderContext): Map<number, number>;
 }
 
 interface RenderContext {
-  canvas: CanvasRenderingContext2D;
-  viewport: ViewportRange;
+  ctx: CanvasRenderingContext2D;
+  geometry: GridGeometry;
   theme: SpreadsheetTheme;
-  cellStore: CellStore;
-  layoutEngine: LayoutEngine;
-  selection: SelectionState;
+  canvasWidth: number;
+  canvasHeight: number;
+  viewport: ViewportRange;
+  scrollX: number;
+  scrollY: number;
+  renderMode: RenderMode;
+  paneRegion: PaneRegion;
+  mergeManager?: MergeManager;
 }
 ```
 
@@ -76,25 +79,20 @@ The `ViewportManager` calculates which rows and columns are currently visible, p
 
 ```ts
 interface ViewportRange {
-  startRow: number;    // First visible row
-  endRow: number;      // Last visible row (inclusive)
-  startCol: number;    // First visible column
-  endCol: number;      // Last visible column (inclusive)
-  bufferRows: number;  // Extra rows rendered above/below viewport
+  readonly startRow: number;       // First visible row (inclusive, with buffer)
+  readonly endRow: number;         // Last visible row (inclusive, with buffer)
+  readonly startCol: number;       // First visible column (inclusive, with buffer)
+  readonly endCol: number;         // Last visible column (inclusive, with buffer)
+  readonly visibleRowCount: number; // Visible rows including buffer
+  readonly visibleColCount: number; // Visible columns including buffer
 }
 ```
 
 Only cells within the viewport (plus buffer) are rendered. For a 100K-row dataset, typically only 30-50 rows are drawn per frame.
 
-## ScrollVelocityTracker
-
-When the user scrolls fast, full cell rendering would cause frame drops. The `ScrollVelocityTracker` detects fast scrolling and switches to placeholder mode:
-
-- **Entry condition**: 2 consecutive scroll samples exceeding 150 px/frame
-- **Placeholder mode**: Renders simplified rectangles instead of full cell content
-- **Exit condition**: Sticky — exits only after 150ms of scroll idle (no early exit on single slow frame)
+## Scroll Rendering
 
-This two-mode rendering ensures smooth scrolling even through large datasets.
+The `RenderMode` type supports `'full' | 'light' | 'placeholder'` modes. Currently the mode is always `'full'` — all cells are rendered with complete fidelity. The type union exists for future optimization where fast scrolling could switch to simplified rendering.
 
 ## TextMeasureCache
 
@@ -102,7 +100,7 @@ Text measurement (`ctx.measureText()`) is expensive. The `TextMeasureCache` stor
 
 ```ts
 // Cache hit rate is typically >95% for real spreadsheets
-const width = textMeasureCache.measure('14px Inter', 'Hello World');
+const width = textMeasureCache.measureText(ctx, 'Hello World', '14px Inter');
 ```
 
 - **Capacity**: 10,000 entries with LRU eviction
@@ -117,21 +115,20 @@ const width = textMeasureCache.measure('14px Inter', 'Hello World');
 You can add custom layers to the pipeline or reorder existing ones:
 
 ```ts
-engine.getRenderPipeline().addLayer(myCustomLayer);
-engine.getRenderPipeline().insertLayerBefore('SelectionOverlayLayer', myCustomLayer);
-engine.getRenderPipeline().removeLayer('EmptyStateLayer');
+engine.addRenderLayer(myCustomLayer);
+engine.insertRenderLayerBefore(myCustomLayer, selectionLayer);
+engine.removeRenderLayer(emptyStateLayer);
 ```
 
 | Method | Description |
 |---|---|
-| `addLayer(layer)` | Append layer at end of pipeline |
-| `insertLayerBefore(name, layer)` | Insert before a named layer |
-| `removeLayer(name)` | Remove a layer by name |
-| `getLayers()` | Get all layers in order |
+| `addRenderLayer(layer)` | Append layer at end of pipeline |
+| `insertRenderLayerBefore(layer, beforeLayer)` | Insert before an existing layer |
+| `removeRenderLayer(layer)` | Remove a layer |
 
 ## Frozen Pane Rendering
 
-When frozen rows or columns are enabled, the `FrozenPaneManager` splits rendering into 4 regions:
+When frozen rows or columns are enabled, the render pipeline splits rendering into 4 regions:
 
 ```mermaid
 block-beta
diff --git a/packages/site/src/content/docs/concepts/themes.mdx b/packages/site/src/content/docs/concepts/themes.mdx
index 5d7703d..94a7fa0 100644
--- a/packages/site/src/content/docs/concepts/themes.mdx
+++ b/packages/site/src/content/docs/concepts/themes.mdx
@@ -108,11 +108,12 @@ const brandTheme: SpreadsheetTheme = {
     ...lightTheme.colors,
     headerBackground: '#1a365d',
     headerText: '#ffffff',
-    selectionBackground: 'rgba(66, 153, 225, 0.15)',
+    selectionFill: 'rgba(66, 153, 225, 0.15)',
     selectionBorder: '#3182ce',
     activeCellBorder: '#2b6cb0',
   },
   fonts: {
+    ...lightTheme.fonts,
     cell: '13px "IBM Plex Sans", sans-serif',
     header: 'bold 13px "IBM Plex Sans", sans-serif',
   },
@@ -159,6 +160,6 @@ engine.on('themeChange', ({ theme }) => {
 When creating custom themes, keep these in mind:
 
 - **Contrast**: Ensure at least 4.5:1 contrast ratio between text and background for WCAG AA compliance.
-- **Selection visibility**: The `selectionBackground` should be visible against both `cellBackground` and `alternateRowBackground`.
-- **Frozen pane border**: Use a distinct color for `frozenPaneBorder` to clearly separate frozen and scrollable regions.
+- **Selection visibility**: The `selectionFill` should be visible against both `background` and `alternateRowBackground`.
+- **Frozen pane border**: Use a distinct color for `frozenSeparator` to clearly separate frozen and scrollable regions.
 - **Grid lines**: Subtle grid lines (low contrast) reduce visual noise. Use `showGridLines: false` in config to hide them entirely.
diff --git a/packages/site/src/content/docs/frameworks/angular.mdx b/packages/site/src/content/docs/frameworks/angular.mdx
index 2685ba5..2f25745 100644
--- a/packages/site/src/content/docs/frameworks/angular.mdx
+++ b/packages/site/src/content/docs/frameworks/angular.mdx
@@ -13,7 +13,7 @@ The `@witqq/spreadsheet-angular` package provides `SpreadsheetComponent`, a stan
 npm install @witqq/spreadsheet @witqq/spreadsheet-angular
 ```
 
-Requires Angular 16+ (standalone component support).
+Requires Angular 17+ (standalone component support).
 
 ## SpreadsheetComponent
 
diff --git a/packages/site/src/content/docs/frameworks/react.mdx b/packages/site/src/content/docs/frameworks/react.mdx
index c8b4539..9e6d462 100644
--- a/packages/site/src/content/docs/frameworks/react.mdx
+++ b/packages/site/src/content/docs/frameworks/react.mdx
@@ -28,6 +28,8 @@ import { Spreadsheet } from '@witqq/spreadsheet-react';
 
 All `SpreadsheetEngineConfig` props pass through to the core engine (columns, data, theme, frozenColumns, frozenRows, etc.).
 
+The component also accepts `className` and `style` props that are applied to the wrapper `<div>` element.
+
 ## Callbacks
 
 ```ts
@@ -93,13 +95,12 @@ interface SpreadsheetRef {
 
 - **`data`** — updates the cell store and re-renders
 - **`theme`** — propagates to all subsystems (canvas layers, editor overlay, tooltips)
-- **`columns`** — updates column definitions and layout
 
 ## Complete Example
 
 ```tsx
 import { useRef, useState, useCallback } from 'react';
-import { Spreadsheet, SpreadsheetRef } from '@witqq/spreadsheet-react';
+import { Spreadsheet, type SpreadsheetRef } from '@witqq/spreadsheet-react';
 import type { ColumnDef } from '@witqq/spreadsheet';
 
 interface Employee {
@@ -167,7 +168,7 @@ function Controls({ tableRef }: { tableRef: RefObject<SpreadsheetRef> }) {
 
 ```tsx
 import { useRef, useEffect } from 'react';
-import { Spreadsheet, SpreadsheetRef } from '@witqq/spreadsheet-react';
+import { Spreadsheet, type SpreadsheetRef } from '@witqq/spreadsheet-react';
 import { FormulaPlugin, ExcelPlugin, ConditionalFormattingPlugin } from '@witqq/spreadsheet-plugins';
 
 function App() {
diff --git a/packages/site/src/content/docs/frameworks/vue.mdx b/packages/site/src/content/docs/frameworks/vue.mdx
index 9f577b9..07230ef 100644
--- a/packages/site/src/content/docs/frameworks/vue.mdx
+++ b/packages/site/src/content/docs/frameworks/vue.mdx
@@ -150,7 +150,7 @@ The component watches two props and updates the engine automatically:
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { lightTheme, darkTheme } from '@witqq/spreadsheet';
 
 const isDark = ref(false);
diff --git a/packages/site/src/content/docs/frameworks/widget.mdx b/packages/site/src/content/docs/frameworks/widget.mdx
index 184dcb1..9593945 100644
--- a/packages/site/src/content/docs/frameworks/widget.mdx
+++ b/packages/site/src/content/docs/frameworks/widget.mdx
@@ -12,7 +12,7 @@ The `@witqq/spreadsheet-widget` package provides an embeddable spreadsheet bundl
 ### CDN / Script Tag
 
 ```html
-<script src="https://unpkg.com/@witqq/spreadsheet-widget/dist/witqq-spreadsheet-widget.iife.js"></script>
+<script src="https://unpkg.com/@witqq/spreadsheet-widget/dist/witqq-spreadsheet-widget.umd.cjs"></script>
 ```
 
 The script registers a global `Spreadsheet` object with `create()` and `embed()` functions.
@@ -31,7 +31,6 @@ import { create, embed } from '@witqq/spreadsheet-widget';
 
 | Format | Size (gzip) |
 |---|---|
-| IIFE | < 36 KB |
 | UMD | < 36 KB |
 | ESM | < 34 KB |
 
@@ -43,7 +42,7 @@ Zero external dependencies — the entire core engine is bundled.
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://unpkg.com/@witqq/spreadsheet-widget/dist/witqq-spreadsheet-widget.iife.js"></script>
+  <script src="https://unpkg.com/@witqq/spreadsheet-widget/dist/witqq-spreadsheet-widget.umd.cjs"></script>
 </head>
 <body>
   <div id="grid" style="width: 800px; height: 400px;"></div>
@@ -126,22 +125,27 @@ interface WidgetConfig extends SpreadsheetEngineConfig {
 | `columns` | `ColumnDef[]` | — | Column definitions (required) |
 | `data` | `Record<string, unknown>[]` | — | Row data |
 | `rowCount` | `number` | — | Total row count |
+| `width` | `number \| string` | — | Container width (pixels or CSS string) |
+| `height` | `number \| string` | — | Container height (pixels or CSS string) |
 | `theme` | `SpreadsheetTheme` | `lightTheme` | Theme object |
 | `frozenRows` | `number` | — | Frozen rows |
 | `frozenColumns` | `number` | — | Frozen columns |
-| `editable` | `boolean` | — | Enable editing |
-| `sortable` | `boolean` | — | Enable sorting |
-| `showGridLines` | `boolean` | — | Show grid lines |
-| `showRowNumbers` | `boolean` | — | Show row numbers |
+| `editable` | `boolean` | `false` | Enable editing |
+| `sortable` | `boolean` | `false` | Enable sorting |
+| `showGridLines` | `boolean` | `true` | Show grid lines |
+| `showRowNumbers` | `boolean` | `true` | Show row numbers |
 | `rowHeight` | `number` | — | Row height (px) |
 | `headerHeight` | `number` | — | Header height (px) |
+| `autoRowHeight` | `boolean \| AutoRowSizeConfig` | `false` | Auto-size row height based on content |
+| `stretchColumns` | `'all' \| 'last'` | — | Stretch columns to fill container width |
+| `locale` | `SpreadsheetLocale` | — | Locale for built-in UI strings |
 
 ## Themes
 
 The widget re-exports `lightTheme` and `darkTheme`:
 
 ```js
-// IIFE (global)
+// UMD (global)
 const engine = Spreadsheet.create('#grid', {
   columns: cols,
   data: rows,
diff --git a/packages/site/src/content/docs/getting-started/configuration.mdx b/packages/site/src/content/docs/getting-started/configuration.mdx
index f7ed960..65eb860 100644
--- a/packages/site/src/content/docs/getting-started/configuration.mdx
+++ b/packages/site/src/content/docs/getting-started/configuration.mdx
@@ -20,11 +20,14 @@ interface SpreadsheetEngineConfig {
   sortable?: boolean;             // Enable column sorting. Default: false.
   frozenRows?: number;            // Number of rows to freeze at the top.
   frozenColumns?: number;         // Number of columns to freeze on the left.
-  rowHeight?: number;             // Row height in pixels. Default from theme.
+  rowHeight?: number;             // Row height in pixels. Default from theme (28).
   headerHeight?: number;          // Header row height in pixels. Default from theme.
   showGridLines?: boolean;        // Show cell grid lines. Default: true.
   showRowNumbers?: boolean;       // Show row number column. Default: true.
-  theme?: SpreadsheetTheme;               // Custom theme object.
+  theme?: SpreadsheetTheme;       // Custom theme object. Default: lightTheme.
+  autoRowHeight?: boolean | AutoRowSizeConfig; // Auto-calculate row heights from content. Default: false. See [Auto Row Height](/guides/auto-row-height/).
+  stretchColumns?: 'all' | 'last'; // Stretch columns to fill container width. See [Column Stretch](/guides/column-stretch/).
+  locale?: SpreadsheetLocale;     // Locale for number/date formatting and UI labels. See [Locale System](/guides/locale/).
 }
 ```
 
@@ -46,6 +49,8 @@ interface ColumnDef {
   editable?: boolean;   // Allow editing cells in this column. Overrides table-level setting.
   resizable?: boolean;  // Allow column width resizing via drag.
   hidden?: boolean;     // Hide this column from view.
+  wrapText?: boolean;   // Enable text wrapping in this column. See [Text Wrapping](/guides/text-wrapping/).
+  validation?: SpreadsheetValidationRule[]; // Column-level validation rules.
 }
 ```
 
@@ -58,7 +63,8 @@ The `type` field accepts one of these values:
 | `'string'` | Plain text (default) |
 | `'number'` | Numeric values with right-alignment |
 | `'boolean'` | Checkbox rendering |
-| `'date'` | Date values with locale formatting |
+| `'date'` | Date values with locale formatting. See [Date Editors](/guides/date-editors/) |
+| `'datetime'` | Date + time with calendar and time picker. See [Date Editors](/guides/date-editors/) |
 | `'select'` | Dropdown with predefined options |
 | `'dynamicSelect'` | Dropdown with runtime-resolved options |
 | `'formula'` | Computed cell (requires formula plugin) |
@@ -126,15 +132,18 @@ Column-level `sortable` and `filterable` override the table-level `sortable` set
 
 ## Spreadsheet React Props
 
-The React wrapper accepts all `SpreadsheetEngineConfig` fields as props, plus event callbacks:
+The React wrapper accepts all `SpreadsheetEngineConfig` fields as props, plus event callbacks, `className`, and `style`:
 
 ```tsx
 <Spreadsheet<TRow>
   // ... all SpreadsheetEngineConfig fields ...
+  className="my-table"
+  style={{ width: '100%', height: '600px' }}
   onCellChange={(event) => {}}
   onSelectionChange={(event) => {}}
   onSortChange={(event) => {}}
   onFilterChange={(event) => {}}
+  onScroll={(event) => {}}
   onReady={() => {}}
 />
 ```
diff --git a/packages/site/src/content/docs/getting-started/index.mdx b/packages/site/src/content/docs/getting-started/index.mdx
index 0107316..625d149 100644
--- a/packages/site/src/content/docs/getting-started/index.mdx
+++ b/packages/site/src/content/docs/getting-started/index.mdx
@@ -1,24 +1,24 @@
 ---
 title: Introduction
-description: High-performance canvas-based spreadsheet engine for the web
+description: Canvas-based spreadsheet engine for the web
 ---
 
 # @witqq/spreadsheet
 
-A high-performance, canvas-based spreadsheet engine built with TypeScript. Renders 100K+ rows at 60 FPS with zero external dependencies in the core package.
+A canvas-based spreadsheet engine built with TypeScript. Renders 100K+ rows at 60 FPS with zero external dependencies in the core package.
 
 ## What is @witqq/spreadsheet?
 
 @witqq/spreadsheet is a spreadsheet component that uses Canvas 2D for rendering instead of the DOM. This eliminates the DOM node ceiling that limits traditional table libraries and enables smooth scrolling, fast cell rendering, and consistent performance regardless of dataset size.
 
-The engine is framework-agnostic — the core package is pure TypeScript with no dependencies. An official React wrapper is provided, and wrappers for other frameworks can be built on top of the core.
+The engine is framework-agnostic — the core package is pure TypeScript with no dependencies. Official wrappers are provided for React, Vue 3, and Angular. A framework-agnostic IIFE/UMD widget bundle is also available.
 
 ## Key Features
 
-- **Canvas 2D rendering** — 60 FPS scrolling and rendering at any scale. No DOM nodes per cell.
+- **Canvas 2D rendering** — 60 FPS scrolling and rendering with 1M+ rows. No DOM nodes per cell.
 - **Zero dependencies** — The `@witqq/spreadsheet` package has no external dependencies. Under 500KB total.
 - **Plugin system** — Extend with official plugins for formulas, Excel I/O, conditional formatting, and context menus.
-- **Framework-agnostic core** — Pure TypeScript engine works anywhere. Official React wrapper included.
+- **Framework-agnostic core** — Pure TypeScript engine with no framework dependency. Official React, Vue 3, and Angular wrappers included.
 - **Full editing** — Inline editing, undo/redo (100 steps), clipboard with Excel/Sheets interop.
 - **Sorting & filtering** — Multi-column stable sort, 14 filter operators, header click integration.
 - **Frozen panes** — Freeze rows and columns with 4-region viewport rendering.
@@ -32,15 +32,18 @@ The engine is framework-agnostic — the core package is pure TypeScript with no
 
 ## Architecture
 
-@witqq/spreadsheet is organized as a monorepo with three main packages:
+@witqq/spreadsheet is organized as a monorepo:
 
 | Package | Description |
 |---------|-------------|
 | `@witqq/spreadsheet` | Canvas engine — pure TypeScript, zero dependencies |
 | `@witqq/spreadsheet-react` | React wrapper — `Spreadsheet<TRow>` component with callbacks and ref API |
-| `@witqq/spreadsheet-plugins` | Official plugins — formula engine, conditional formatting, Excel I/O, context menu |
+| `@witqq/spreadsheet-vue` | Vue 3 wrapper |
+| `@witqq/spreadsheet-angular` | Angular wrapper |
+| `@witqq/spreadsheet-widget` | Framework-agnostic IIFE/UMD bundle |
+| `@witqq/spreadsheet-plugins` | Official plugins — formula engine, conditional formatting, Excel I/O, context menu, progressive loader |
 
-The core engine (`SpreadsheetEngine`) orchestrates 20+ subsystems: CellStore, DataView, EventBus, SelectionManager, KeyboardNavigator, InlineEditor, CommandManager, ClipboardManager, RenderPipeline, and more. Each subsystem is independent and communicates through the typed EventBus.
+The core engine (`SpreadsheetEngine`) orchestrates multiple subsystems: CellStore, DataView, EventBus, SelectionManager, KeyboardNavigator, InlineEditor, CommandManager, ClipboardManager, RenderPipeline, and more. Each subsystem is independent and communicates through the typed EventBus.
 
 ## License
 
@@ -53,6 +56,6 @@ The core engine (`SpreadsheetEngine`) orchestrates 20+ subsystems: CellStore, Da
 ## Next Steps
 
 - [Installation](/getting-started/installation/) — Install packages via npm
-- [Quick Start](/getting-started/quick-start/) — Build your first table in 5 minutes
+- [Quick Start](/getting-started/quick-start/) — Build your first table
 - [Configuration](/getting-started/configuration/) — All available options
 - [Architecture](/concepts/architecture/) — How the engine works internally
diff --git a/packages/site/src/content/docs/getting-started/installation.mdx b/packages/site/src/content/docs/getting-started/installation.mdx
index a00710c..c616684 100644
--- a/packages/site/src/content/docs/getting-started/installation.mdx
+++ b/packages/site/src/content/docs/getting-started/installation.mdx
@@ -5,7 +5,7 @@ description: "How to install @witqq/spreadsheet packages via npm"
 
 # Installation
 
-## React Project (Recommended)
+## React Project
 
 Install the core engine and the React wrapper together:
 
@@ -17,13 +17,13 @@ This gives you the `Spreadsheet` React component with full TypeScript support.
 
 ### Peer Dependencies
 
-The React wrapper requires React 18 or later:
+The React wrapper requires React 18 or 19:
 
 ```json
 {
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }
 ```
@@ -38,7 +38,7 @@ If you are not using React, install just the core engine:
 npm install @witqq/spreadsheet
 ```
 
-The core package has **zero external dependencies**. It works in any JavaScript environment — browsers, Node.js, Web Workers, or any framework.
+The core package has **zero external dependencies**. It works in browsers, Node.js, and Web Workers.
 
 You can build your own framework wrapper on top of the core `SpreadsheetEngine` class.
 
@@ -58,6 +58,7 @@ This package includes:
 | Conditional Format | Gradients, data bars, icon sets |
 | Excel I/O | Import/export via lazy-loaded SheetJS (Apache-2.0) |
 | Context Menu | Right-click menu with keyboard navigation |
+| Progressive Loader | Stream large datasets in time-budgeted chunks |
 
 Plugins are registered via the engine's plugin API and can be installed or removed at runtime.
 
diff --git a/packages/site/src/content/docs/getting-started/performance.mdx b/packages/site/src/content/docs/getting-started/performance.mdx
index 54db548..1741d1b 100644
--- a/packages/site/src/content/docs/getting-started/performance.mdx
+++ b/packages/site/src/content/docs/getting-started/performance.mdx
@@ -9,7 +9,7 @@ import { MillionRowsDemo, MillionRowsExplanation } from '../../../components/dem
 
 # 1,000,000 Rows at 60 FPS
 
-@witqq/spreadsheet renders a million rows with the same performance as a hundred. Click the button below to load 1,000,000 rows and scroll through them.
+@witqq/spreadsheet renders a million rows at 60 FPS because rendering cost is O(viewport size), not O(total rows). Click the button below to load 1,000,000 rows and scroll through them.
 
 <MillionRowsDemo height={500} client:visible />
 
@@ -28,7 +28,9 @@ The data array for 1M rows with 7 columns uses approximately 200-400MB of JavaSc
 ## Try It Yourself
 
 ```tsx
+import { useRef, useEffect } from 'react';
 import { Spreadsheet } from '@witqq/spreadsheet-react';
+import type { SpreadsheetRef } from '@witqq/spreadsheet-react';
 import { ProgressiveLoaderPlugin } from '@witqq/spreadsheet-plugins';
 
 const columns = [
@@ -38,7 +40,7 @@ const columns = [
 ];
 
 function App() {
-  const ref = useRef(null);
+  const ref = useRef<SpreadsheetRef>(null);
 
   useEffect(() => {
     const engine = ref.current?.getInstance();
@@ -53,6 +55,7 @@ function App() {
         name: `Row ${i + 1}`,
         value: Math.random() * 1000,
       }),
+      onProgress: (loaded, total) => console.log(`${loaded}/${total}`),
       onComplete: (ms) => console.log(`Loaded in ${ms}ms`),
     });
     engine.installPlugin(loader);
@@ -71,7 +74,7 @@ function App() {
 }
 ```
 
-The `ProgressiveLoaderPlugin` loads data in time-budgeted chunks using `scheduler.yield()` (Chrome 129+) or `MessageChannel` fallback, showing an animated progress overlay. The table is interactive immediately — scroll and navigate while data loads.
+The `ProgressiveLoaderPlugin` loads data in time-budgeted chunks using `scheduler.yield()` with `MessageChannel` fallback, showing an animated progress overlay. The table is interactive immediately — scroll and navigate while data loads.
 
 ## Benchmark Utilities
 
diff --git a/packages/site/src/content/docs/getting-started/quick-start.mdx b/packages/site/src/content/docs/getting-started/quick-start.mdx
index 52a9692..b749649 100644
--- a/packages/site/src/content/docs/getting-started/quick-start.mdx
+++ b/packages/site/src/content/docs/getting-started/quick-start.mdx
@@ -1,6 +1,6 @@
 ---
 title: Quick Start
-description: "Build your first @witqq/spreadsheet in 5 minutes"
+description: "Build your first @witqq/spreadsheet table"
 ---
 
 import { BasicTableDemo } from '../../../components/demos/BasicTableDemo';
@@ -9,7 +9,7 @@ import { Code } from '@astrojs/starlight/components';
 
 # Quick Start
 
-This guide shows how to create a basic editable spreadsheet with React in under 5 minutes.
+This guide shows how to create a basic editable spreadsheet with React.
 
 <BasicTableDemo client:visible />
 
diff --git a/packages/site/src/content/docs/getting-started/typescript.mdx b/packages/site/src/content/docs/getting-started/typescript.mdx
index ad44564..acbd40f 100644
--- a/packages/site/src/content/docs/getting-started/typescript.mdx
+++ b/packages/site/src/content/docs/getting-started/typescript.mdx
@@ -50,6 +50,8 @@ const columns = [
 Event callbacks receive typed parameters:
 
 ```tsx
+import type { CellChangeEvent, SelectionChangeEvent, SortChangeEvent, FilterChangeEvent } from '@witqq/spreadsheet';
+
 <Spreadsheet<Product>
   columns={columns}
   data={products}
@@ -108,8 +110,8 @@ interface SpreadsheetRef {
   focus(): void;                  // Focus the table canvas
   getSelection(): Selection;      // Current selection state
   selectCell(row: number, col: number): void;
-  getCell(row: number, col: number): unknown;
-  setCell(row: number, col: number, value: unknown): void;
+  getCell(row: number, col: number): CellData | undefined;
+  setCell(row: number, col: number, value: CellValue): void;
   undo(): void;
   redo(): void;
   scrollTo(x: number, y: number): void;
@@ -131,9 +133,9 @@ const engine = tableRef.current?.getInstance();
 if (engine) {
   const cell: CellData | undefined = engine.getCellStore().get(0, 0);
   if (cell) {
-    console.log(cell.value);        // CellValue (string | number | boolean | Date | null)
-    console.log(cell.displayValue); // Formatted string for rendering
-    console.log(cell.type);         // CellType
+    console.log(cell.value);         // CellValue (string | number | boolean | Date | null)
+    console.log(cell.displayValue);  // string | undefined — formatted string for rendering
+    console.log(cell.type);          // CellType | undefined
   }
 }
 ```
diff --git a/packages/site/src/content/docs/guides/auto-row-height.mdx b/packages/site/src/content/docs/guides/auto-row-height.mdx
new file mode 100644
index 0000000..edcd9ba
--- /dev/null
+++ b/packages/site/src/content/docs/guides/auto-row-height.mdx
@@ -0,0 +1,105 @@
+---
+title: "Auto Row Height"
+description: "Automatically size row heights based on cell content with two-phase measurement: synchronous viewport and async off-screen."
+---
+
+# Auto Row Height
+
+When cells contain wrapped text or custom renderers with variable height, auto row height measures actual content and adjusts row heights automatically. The engine uses a two-phase approach: synchronous measurement for visible rows and asynchronous background measurement for off-screen rows.
+
+## Configuration
+
+```ts
+import { Spreadsheet } from '@witqq/spreadsheet-react';
+
+<Spreadsheet
+  columns={columns}
+  data={data}
+  autoRowHeight={true}
+/>
+```
+
+Enable with `true` for defaults, or pass an `AutoRowSizeConfig` object:
+
+```ts
+interface AutoRowSizeConfig {
+  batchSize?: number;    // Off-screen async batch size (default: 100)
+  minRowHeight?: number; // Floor height in px (default: theme rowHeight, fallback 28)
+  cellPadding?: number;  // Vertical padding added to measured height (default: 8)
+}
+```
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `batchSize` | `number` | `100` | Number of off-screen rows measured per idle callback |
+| `minRowHeight` | `number` | `theme.dimensions.rowHeight` | Minimum row height — auto measurement never goes below this |
+| `cellPadding` | `number` | `8` | Extra vertical padding added to measured content height |
+
+```ts
+<Spreadsheet
+  columns={columns}
+  data={data}
+  autoRowHeight={{
+    batchSize: 200,
+    minRowHeight: 32,
+    cellPadding: 12,
+  }}
+/>
+```
+
+## How Measurement Works
+
+Auto row height measures content in two phases:
+
+### Phase 1 — Viewport (Synchronous)
+
+After each render, the engine measures all visible rows synchronously. For each row, it finds the tallest content across all columns with `wrapText: true` or custom cell types that implement `measureHeight()`. The final height is:
+
+```
+Math.max(measuredContentHeight + cellPadding, minRowHeight)
+```
+
+A guard flag prevents infinite measure → render → measure loops.
+
+### Phase 2 — Off-Screen (Asynchronous)
+
+On mount, a background sweep starts measuring off-screen rows using `requestIdleCallback`. Rows are processed in batches of `batchSize`, never blocking the main thread. The sweep runs when the browser is idle and yields between batches.
+
+### Dirty Tracking
+
+The engine tracks which rows need re-measurement:
+
+- **Cell edit** — marks the edited row dirty
+- **Column resize on a `wrapText` column** — marks all rows dirty (available width changed)
+- **Data load** — marks all rows dirty
+
+Only dirty rows are re-measured, avoiding full-table sweeps after small edits.
+
+## Manual Resize Interaction
+
+Manual row resizes always take priority over auto measurement. The `RowStore` maintains separate `manualHeightOverrides` and `autoHeightOverrides` maps:
+
+- If a user manually resizes a row, it is marked as manual
+- Auto measurement skips manual rows entirely
+- Clearing a manual override (`clearHeight(row)`) lets auto height resume for that row
+
+## Performance
+
+For large datasets (100K+ rows):
+
+- Off-screen measurement runs via `requestIdleCallback` — zero main thread blocking
+- Text measurement results are cached by `TextMeasureCache` (LRU, 10K entries)
+- Dirty tracking avoids re-measuring unchanged rows
+- Height updates are batched — rows with height changes < 0.01px are skipped
+- Only columns with `wrapText: true` are measured; non-wrap columns are skipped
+
+Monitor progress via `autoRowSizeManager.progress` (0–1) and `autoRowSizeManager.isMeasuring`.
+
+## Interaction with Text Wrapping
+
+Auto row height requires at least one column with `wrapText: true` to have any effect. Without wrapped text, all cells are single-line and have the same height. See [Text Wrapping](/guides/text-wrapping/) for wrap configuration.
+
+## See Also
+
+- [Text Wrapping](/guides/text-wrapping/) — per-column word wrap configuration
+- [Column & Row Resize](/guides/resize/) — manual resizing
diff --git a/packages/site/src/content/docs/guides/autofill.mdx b/packages/site/src/content/docs/guides/autofill.mdx
index 1dc75cd..ae7ea56 100644
--- a/packages/site/src/content/docs/guides/autofill.mdx
+++ b/packages/site/src/content/docs/guides/autofill.mdx
@@ -53,9 +53,6 @@ function App() {
       columns={columns}
       data={data}
       editable={true}
-      onAutofillComplete={(event) => {
-        console.log('Filled cells');
-      }}
     />
   );
 }
@@ -87,8 +84,8 @@ import { detectPattern, extendPattern } from '@witqq/spreadsheet';
 ```typescript
 interface DetectedPattern {
   type: 'number-sequence' | 'number-increment' | 'date-sequence' | 'text-repeat';
-  values: CellValue[];
-  step?: number;          // Increment for number sequences
+  sourceValues: readonly CellValue[];
+  step: number;             // Increment for number sequences, interval in ms for dates
 }
 ```
 
@@ -98,6 +95,6 @@ interface DetectedPattern {
 
 | Event | Payload | Description |
 |---|---|---|
-| `autofillStart` | `{ anchor, range }` | Drag started from fill handle |
-| `autofillPreview` | `{ range, values }` | Preview of values during drag |
-| `autofillComplete` | `{ filledCells }` | Fill operation completed |
+| `autofillStart` | `{ sourceRange: CellRange }` | Drag started from fill handle |
+| `autofillPreview` | `{ sourceRange: CellRange, fillRange: CellRange \| null, direction: FillDirection \| null }` | Preview of fill area during drag |
+| `autofillComplete` | `{ sourceRange: CellRange, fillRange: CellRange, direction: FillDirection }` | Fill operation completed |
diff --git a/packages/site/src/content/docs/guides/cell-editor-registry.mdx b/packages/site/src/content/docs/guides/cell-editor-registry.mdx
new file mode 100644
index 0000000..70e4cbb
--- /dev/null
+++ b/packages/site/src/content/docs/guides/cell-editor-registry.mdx
@@ -0,0 +1,122 @@
+---
+title: "Cell Editor Registry"
+description: "Register custom cell editors, understand the editor lifecycle, and control which editor opens for each cell type."
+---
+
+# Cell Editor Registry
+
+The `CellEditorRegistry` determines which editor opens when a user activates a cell. Editors are registered with a matcher function and a priority — the first match wins.
+
+## Built-in Editors
+
+| Editor | Column Type | Behavior |
+|---|---|---|
+| **InlineEditor** | fallback (all) | Textarea overlay; handles Enter, Escape, Tab, scroll |
+| **DatePickerEditor** | `'date'` | Calendar overlay; commits `YYYY-MM-DD` |
+| **DateTimeEditor** | `'datetime'` | Calendar + time spinners; commits `YYYY-MM-DDTHH:mm` |
+
+The inline editor is the default fallback when no registered editor matches.
+
+## Editor Selection
+
+`resolve(column, value)` iterates registered entries from highest to lowest priority. The first matcher returning `true` provides the editor. If no match, the engine falls back to `InlineEditor`.
+
+```
+registry.resolve(column, cellValue)
+  → entries sorted by priority (descending)
+  → first matcher(column, value) === true → return editor
+  → no match → null → InlineEditor fallback
+```
+
+## Registering Custom Editors
+
+### By Column Type
+
+```ts
+engine.registerCellEditor(myEditor, 'currency', 10);
+```
+
+This registers `myEditor` to handle columns with `type: 'currency'` at priority 10.
+
+### By Predicate
+
+For complex matching logic, access the registry directly:
+
+```ts
+engine.getCellEditorRegistry().register(
+  myEditor,
+  (column, value) => column.type === 'rating' && typeof value === 'number',
+  5
+);
+```
+
+Higher priority values are checked first.
+
+## CellEditor Interface
+
+Custom editors implement the `CellEditor` interface:
+
+```ts
+interface CellEditor {
+  readonly id: string;
+  readonly isOpen: boolean;
+  readonly editingRow: number;
+  readonly editingCol: number;
+
+  open(context: CellEditorContext, commitFn: CellEditorCommit, closeFn): void;
+  close(reason: EditorCloseReason): void;
+  setTheme(theme: SpreadsheetTheme): void;
+  setLocale(locale: ResolvedLocale): void;
+  destroy(): void;
+}
+```
+
+`ResolvedLocale` is `Required<SpreadsheetLocale>` — the result of merging a partial locale with English defaults via `resolveLocale()`.
+
+### Editor Lifecycle
+
+1. **Open**: The engine calls `editor.open(context, commitFn, closeFn)`. The editor renders its DOM into `context.container`.
+2. **Value change**: The editor manages its own internal state.
+3. **Commit**: Call `commitFn(row, col, oldValue, newValue)` to write the value. This executes a `CellEditCommand` via the command manager and emits a `cellChange` event.
+4. **Close**: Call `closeFn(reason)` or the engine calls `editor.close(reason)`. The editor removes its DOM.
+5. **Destroy**: Called during engine teardown to release all resources.
+
+### CellEditorContext
+
+The context object provides everything the editor needs:
+
+| Field | Description |
+|---|---|
+| `row`, `col` | Cell coordinates |
+| `value` | Current cell value |
+| `column` | ColumnDef for this cell |
+| `container` | DOM element to render into |
+| `scrollContainer` | Scrollable parent |
+| `layoutEngine` | For cell rect calculations |
+| `scrollManager` | Scroll state |
+| `cellStore` | Cell data access |
+| `dataView` | Filtered/sorted data view |
+| `theme` | Current theme |
+| `locale` | Current locale |
+| `mergeManager` | Merged cell info |
+| `frozenRows`, `frozenColumns` | Freeze pane counts |
+
+### EditorCloseReason
+
+The `reason` parameter in `close()` tells the engine how to handle focus after closing:
+
+`'enter'` | `'shift-enter'` | `'tab'` | `'shift-tab'` | `'escape'` | `'blur'` | `'scroll'` | `'programmatic'`
+
+## DOM and Focus
+
+- **InlineEditor**: Creates a `<textarea>` positioned over the cell via `LayoutEngine.getCellRect()`, z-index 20. Auto-focuses and selects content on open. Scroll commits and closes (except for frozen corner cells).
+- **Overlay editors** (date, datetime): Create a `<div role="dialog">`, z-index 50. Positioned below the cell (flips above if needed). Outside click closes.
+
+## Theme and Locale Propagation
+
+When `engine.setTheme()` or `engine.setLocale()` is called, the registry propagates the change to all registered editors via `setTheme()` / `setLocale()`.
+
+## See Also
+
+- [Date & DateTime Editors](/guides/date-editors/) — built-in calendar editors
+- [Locale System](/guides/locale/) — editor label translations
diff --git a/packages/site/src/content/docs/guides/clipboard.mdx b/packages/site/src/content/docs/guides/clipboard.mdx
index 960e20a..8d16c82 100644
--- a/packages/site/src/content/docs/guides/clipboard.mdx
+++ b/packages/site/src/content/docs/guides/clipboard.mdx
@@ -7,7 +7,7 @@ import { ClipboardDemo } from '../../../components/demos/ClipboardDemo';
 import clipboardSource from '../../../components/demos/ClipboardDemo.tsx?raw';
 import { Code } from '@astrojs/starlight/components';
 
-Spreadsheet's `ClipboardManager` provides full clipboard support. Selected cells can be copied (Ctrl+C), cut (Ctrl+X), or pasted (Ctrl+V). Data is written in two formats simultaneously: `text/plain` as tab-separated values (TSV) and `text/html` as an HTML table. This dual-format approach enables seamless interop with Excel and Google Sheets.
+Spreadsheet's `ClipboardManager` provides full clipboard support. Selected cells can be copied (Ctrl+C), cut (Ctrl+X), or pasted (Ctrl+V). Data is written in two formats simultaneously: `text/plain` as tab-separated values (TSV) and `text/html` as an HTML table. This dual-format approach enables direct interop with Excel and Google Sheets.
 
 <ClipboardDemo client:visible />
 
@@ -40,21 +40,32 @@ Select a range, press Ctrl+C to copy, click a destination cell, and press Ctrl+V
 
 ## Listening to Clipboard Events
 
+Subscribe to clipboard events via the engine's EventBus:
+
 ```tsx
-<Spreadsheet
-  columns={columns}
-  data={data}
-  editable={true}
-  onClipboardCopy={(cells) => {
-    console.log('Copied', cells.length, 'cells');
-  }}
-  onClipboardCut={(cells) => {
-    console.log('Cut', cells.length, 'cells');
-  }}
-  onClipboardPaste={(cells, target) => {
-    console.log('Pasted at', target.row, target.col);
-  }}
-/>
+import { useRef, useEffect } from 'react';
+import { Spreadsheet } from '@witqq/spreadsheet-react';
+import type { SpreadsheetRef } from '@witqq/spreadsheet-react';
+
+function App() {
+  const ref = useRef<SpreadsheetRef>(null);
+
+  useEffect(() => {
+    const engine = ref.current?.getInstance();
+    if (!engine) return;
+
+    engine.on('clipboardCopy', (event) => {
+      console.log('Copied cells');
+    });
+    engine.on('clipboardPaste', (event) => {
+      console.log('Pasted cells');
+    });
+  }, []);
+
+  return (
+    <Spreadsheet ref={ref} columns={columns} data={data} editable={true} />
+  );
+}
 ```
 
 ## Clipboard Format Details
@@ -64,7 +75,7 @@ Select a range, press Ctrl+C to copy, click a destination cell, and press Ctrl+V
 | TSV | `text/plain` | Tab-separated values, newlines between rows |
 | HTML | `text/html` | `<table>` with `<tr>` and `<td>` elements |
 
-When pasting from external sources, Spreadsheet reads `text/plain` (TSV) first. If unavailable, it falls back to parsing `text/html`.
+When pasting from external sources, Spreadsheet reads `text/html` first for richer structure (Excel/Google Sheets format). If unavailable, it falls back to parsing `text/plain` (TSV).
 
 ## Serialization Utilities
 
@@ -79,5 +90,5 @@ const html: string = serializeToHTML(cells);   // HTML <table>
 
 // Parse clipboard data back to cell values
 const fromTSV: CellValue[][] = parseTSV(tsvString);
-const fromHTML: CellValue[][] = parseHTML(htmlString);
+const fromHTML: CellValue[][] | null = parseHTML(htmlString);
 ```
diff --git a/packages/site/src/content/docs/guides/column-stretch.mdx b/packages/site/src/content/docs/guides/column-stretch.mdx
new file mode 100644
index 0000000..5d5d1a2
--- /dev/null
+++ b/packages/site/src/content/docs/guides/column-stretch.mdx
@@ -0,0 +1,101 @@
+---
+title: "Column Stretch"
+description: "Auto-fill container width by distributing extra space to columns — 'all' for even distribution, 'last' for last column."
+---
+
+# Column Stretch
+
+When total column width is less than the container width, `stretchColumns` distributes the remaining space so columns fill the container. Two modes are available: `'all'` distributes space evenly across stretchable columns, `'last'` gives all extra space to the last visible column.
+
+## Configuration
+
+```ts
+<Spreadsheet
+  columns={columns}
+  data={data}
+  stretchColumns="all"
+/>
+```
+
+| Value | Behavior |
+|---|---|
+| `'all'` | Extra space distributed evenly among stretchable columns |
+| `'last'` | All extra space added to the last visible column |
+| `undefined` | No stretching (default) — columns use their defined widths |
+
+## How It Works
+
+The `ColumnStretchManager` calculates stretched widths:
+
+1. Sum all visible column widths
+2. If total ≥ container width → no stretch needed (return)
+3. Calculate `extraSpace = containerWidth - totalColumnWidth`
+4. Distribute based on mode
+
+### `'all'` Mode
+
+Extra space is divided equally among stretchable columns. A column is stretchable if it is:
+
+- Not frozen
+- Not manually resized by the user
+
+```
+perColumn = extraSpace / stretchableCount
+newWidth = Math.max(currentWidth + perColumn, minWidth ?? 30)
+```
+
+If all columns are frozen or manually resized, `'all'` mode falls back to `'last'` mode.
+
+### `'last'` Mode
+
+All extra space goes to the last visible column:
+
+```
+lastColumnWidth = currentWidth + extraSpace
+```
+
+## Manual Column Resize
+
+When a user manually resizes a column:
+
+1. The column is marked as `manuallyResized`
+2. Stretch recalculates — the resized column keeps its manual width
+3. Remaining extra space is redistributed among non-manual, non-frozen columns
+
+Manual resize marks are tracked in a `Set`. Clearing marks (e.g., on column reorder) re-enables stretch for those columns.
+
+## Container Resize
+
+A `ResizeObserver` monitors the container element. When the container changes size:
+
+1. Canvas dimensions are synced
+2. Column stretch recalculates with the new container width
+3. The table re-renders with updated widths
+
+This means stretch responds automatically to browser window resize, sidebar toggles, or any container layout change.
+
+## Frozen Column Interaction
+
+Frozen columns are never stretched — their widths are fixed. However, their widths count toward the total, reducing the available space for stretched columns.
+
+```
+Available stretch space = containerWidth - totalVisibleColumnWidths
+```
+
+## Minimum Column Width
+
+Each column respects `ColumnDef.minWidth` (default: 30px). Stretch never shrinks a column below its minimum. If the `perColumn` addition would result in a width below `minWidth`, the minimum is enforced.
+
+## When Stretch Has No Effect
+
+Stretch does nothing when:
+
+- Total column width already equals or exceeds container width
+- `stretchColumns` is not set
+- Container width is unknown (not yet mounted)
+
+## See Also
+
+- [Column & Row Resize](/guides/resize/) — manual column resizing
+- [Frozen Panes](/guides/frozen-panes/) — frozen columns are excluded from stretch
+- [Text Wrapping](/guides/text-wrapping/) — stretched columns affect available wrap width
diff --git a/packages/site/src/content/docs/guides/context-menu.mdx b/packages/site/src/content/docs/guides/context-menu.mdx
index 1ac59b4..e788690 100644
--- a/packages/site/src/content/docs/guides/context-menu.mdx
+++ b/packages/site/src/content/docs/guides/context-menu.mdx
@@ -80,29 +80,104 @@ Items appear based on their `contexts` array:
 |---|---|---|
 | `registerItem` | `(item: ContextMenuItem) => void` | Add menu item |
 | `unregisterItem` | `(id: string) => void` | Remove menu item |
+| `getItems` | `() => ReadonlyMap<string, ContextMenuItem>` | Get all registered items |
 | `close` | `() => void` | Programmatically close menu |
+| `isOpen` | `boolean` (getter) | Whether the menu is currently open |
 
 ### ContextMenuItem
 
 ```typescript
 interface ContextMenuItem {
-  id: string;
-  label: string;
-  icon?: string;
-  shortcut?: string;
-  contexts: Array<'cell' | 'header' | 'row-number' | 'corner'>;
-  action: (ctx: MenuContext) => void;
-  isDisabled?: (ctx: MenuContext) => boolean;
-  isVisible?: (ctx: MenuContext) => boolean;
+  readonly id: string;
+  readonly label: string;
+  readonly icon?: string;
+  readonly shortcut?: string;
+  readonly separator?: boolean;
+  readonly contexts: ReadonlyArray<'cell' | 'header' | 'row-number' | 'corner'>;
+  readonly submenu?: ReadonlyArray<ContextMenuItem>;
+  action?: (ctx: MenuActionContext) => void;
+  isDisabled?: (ctx: MenuActionContext) => boolean;
+  isVisible?: (ctx: MenuActionContext) => boolean;
 }
 ```
 
+### MenuActionContext
+
+The callback context passed to `action`, `isDisabled`, and `isVisible`:
+
+```typescript
+interface MenuActionContext {
+  readonly row: number;
+  readonly col: number;
+  readonly region: string;
+  readonly engine: SpreadsheetEngine;
+}
+```
+
+## Submenus
+
+Items with a `submenu` property render a nested menu panel. Submenus are recursive — each child can have its own `submenu`:
+
+```ts
+cm?.registerItem({
+  id: 'format-menu',
+  label: 'Format',
+  contexts: ['cell'],
+  submenu: [
+    {
+      id: 'format-bold',
+      label: 'Bold',
+      shortcut: 'Ctrl+B',
+      contexts: ['cell'],
+      action: (ctx) => { /* apply bold */ },
+    },
+    {
+      id: 'format-align',
+      label: 'Alignment',
+      contexts: ['cell'],
+      submenu: [
+        { id: 'align-left', label: 'Left', contexts: ['cell'], action: () => {} },
+        { id: 'align-center', label: 'Center', contexts: ['cell'], action: () => {} },
+        { id: 'align-right', label: 'Right', contexts: ['cell'], action: () => {} },
+      ],
+    },
+  ],
+});
+```
+
+Submenu items display a `▸` chevron; leaf items display their keyboard shortcut.
+
+### Submenu Positioning
+
+Submenus open to the **right** of the parent item. If there is not enough space on the right, they flip to the **left**. Vertical position is clamped to the container bounds.
+
+### Mouse Interaction
+
+- **Hover**: Opens the submenu after a 200ms delay. Moving to a sibling item closes deeper submenus immediately.
+- **Leave**: Closes the submenu after 150ms. Cancelled if the mouse enters the submenu panel.
+- **Click**: On a submenu parent, opens the submenu immediately. On a leaf item, executes the action and closes the entire menu.
+
+### Keyboard Navigation
+
+| Key | Behavior |
+|---|---|
+| Arrow Right | Open submenu of focused item, move focus to first child |
+| Arrow Left | Close current submenu, return focus to parent |
+| Arrow Down/Up | Move focus within current level (wraps around, skips disabled items) |
+| Escape | Close current submenu; if at root level, close entire menu |
+| Enter | Execute focused item action (or open submenu) |
+
+### Visibility
+
+Empty submenus (all children hidden via `isVisible` returning `false`) are automatically hidden from the menu.
+
 ## Plugin Integration
 
 When using the context menu as a plugin, use `createContextMenuPlugin` and its helper functions:
 
 ```typescript
-import { createContextMenuPlugin, createDefaultMenuItems } from '@witqq/spreadsheet-plugins';
+import { createContextMenuPlugin } from '@witqq/spreadsheet-plugins';
+import { createDefaultMenuItems } from '@witqq/spreadsheet';
 
 const plugin = createContextMenuPlugin();
 engine.installPlugin(plugin);
diff --git a/packages/site/src/content/docs/guides/date-editors.mdx b/packages/site/src/content/docs/guides/date-editors.mdx
new file mode 100644
index 0000000..6444cc8
--- /dev/null
+++ b/packages/site/src/content/docs/guides/date-editors.mdx
@@ -0,0 +1,99 @@
+---
+title: "Date & DateTime Editors"
+description: "Calendar overlay for date cells and datetime cells with time spinners — keyboard navigation, positioning, and format handling."
+---
+
+# Date & DateTime Editors
+
+Columns with `type: 'date'` or `type: 'datetime'` open a calendar overlay when a cell is activated (double-click or Enter). The date editor commits on day selection; the datetime editor adds hour and minute spinners before committing.
+
+## Configuration
+
+Set the column type to activate the corresponding editor:
+
+```ts
+const columns: ColumnDef[] = [
+  { key: 'dueDate', title: 'Due Date', width: 120, type: 'date' },
+  { key: 'timestamp', title: 'Timestamp', width: 160, type: 'datetime' },
+];
+```
+
+No additional configuration is needed — the editor is registered automatically via the [cell editor registry](/guides/cell-editor-registry/).
+
+## Date Editor
+
+The `DatePickerEditor` renders a calendar grid inside a `<div role="dialog">`.
+
+- **Trigger**: Double-click or Enter on a date cell
+- **Positioning**: Below the cell; flips above if no room below; clamped horizontally to container bounds
+- **Width**: 224px, z-index 50
+- **Day click**: Selects the date, commits immediately, and closes
+- **Footer**: "Today" button to jump to the current date
+- **Commit format**: `YYYY-MM-DD`
+
+### Input Parsing
+
+Accepts `Date` objects, ISO strings (`YYYY-MM-DD`), and numeric timestamps.
+
+## DateTime Editor
+
+The `DateTimeEditor` extends the calendar with hour and minute spin groups.
+
+- **Day click**: Sets the selected date but stays open for time editing
+- **Time inputs**: Two spin groups (hour 0–23, minute 0–59) with ▲/▼ buttons and editable text inputs
+- **Footer**: "Now" button (sets current date and time) and "OK" button (commits)
+- **Width**: 240px
+- **Commit format**: `YYYY-MM-DDTHH:mm` (ISO)
+
+### Time Input Behavior
+
+- Arrow Up/Down on a time input increments or decrements with wrapping (59 → 0, 23 → 0)
+- Values are clamped to the valid range on manual entry
+- Focus tracking highlights the active section (calendar, hour, or minute)
+
+## Keyboard Navigation
+
+### Calendar
+
+| Key | Action |
+|---|---|
+| Arrow Left/Right | Move ±1 day |
+| Arrow Up/Down | Move ±7 days (one week) |
+| Enter | Commit (date: select day; datetime: commit date+time) |
+| Escape | Close without committing |
+| Tab | Date: commits and closes. Datetime: cycles focus (calendar → hour → minute) |
+| Shift+Tab | Datetime: reverse focus cycle |
+
+Crossing month boundaries auto-navigates to the previous or next month.
+
+## Overlay Positioning
+
+Both editors calculate position from `LayoutEngine.getCellRect()`, adjusted for scroll offset:
+
+1. Place below the cell (`y + cellHeight`)
+2. If insufficient space below, flip above
+3. Clamp horizontally within the container
+4. Frozen cells account for their fixed position (no scroll adjustment)
+
+## Close Triggers
+
+The overlay closes on:
+
+- Outside click (`mousedown` outside the dialog)
+- Scroll (unless the cell is in a frozen corner — both row and column frozen)
+- Escape key
+- Programmatic close via `editor.close()`
+
+## Locale Integration
+
+Calendar labels (week day names, month names, "Today"/"Now" button text) are provided by the [locale system](/guides/locale/):
+
+- `datePicker`: `weekLabels`, `monthNames`, `today`, `ariaLabel`
+- `dateTimePicker`: `hour`, `minute`, `now`, `ariaLabel`
+
+Locale changes at runtime propagate to open editors.
+
+## See Also
+
+- [Cell Editor Registry](/guides/cell-editor-registry/) — how editors are registered and selected
+- [Locale System](/guides/locale/) — translating editor labels
diff --git a/packages/site/src/content/docs/guides/editing.mdx b/packages/site/src/content/docs/guides/editing.mdx
index 396ddcd..d8cc88e 100644
--- a/packages/site/src/content/docs/guides/editing.mdx
+++ b/packages/site/src/content/docs/guides/editing.mdx
@@ -31,8 +31,8 @@ function App() {
       columns={columns}
       data={data}
       editable={true}
-      onCellChange={(row, col, oldValue, newValue) => {
-        console.log(`Cell [${row},${col}]: ${oldValue} → ${newValue}`);
+      onCellChange={(event) => {
+        console.log(`Cell [${event.row},${event.col}]: ${event.oldValue} → ${event.newValue}`);
         // Update your data source
       }}
     />
@@ -58,14 +58,17 @@ const columns: ColumnDef[] = [
 When the editor closes, the reason is provided as `EditorCloseReason`:
 
 ```typescript
-type EditorCloseReason = 'enter' | 'tab' | 'escape' | 'blur' | 'scroll';
+type EditorCloseReason = 'enter' | 'shift-enter' | 'tab' | 'shift-tab' | 'escape' | 'blur' | 'scroll' | 'programmatic';
 ```
 
 - `enter` — User pressed Enter (commits value, moves down)
+- `shift-enter` — User pressed Shift+Enter (commits value, moves up)
 - `tab` — User pressed Tab (commits value, moves to next cell)
+- `shift-tab` — User pressed Shift+Tab (commits value, moves to previous cell)
 - `escape` — User pressed Escape (cancels edit, restores original)
 - `blur` — Editor lost focus (commits value)
 - `scroll` — User scrolled while editing (auto-commits value)
+- `programmatic` — Closed by code via API call
 
 ## API Reference
 
@@ -73,7 +76,12 @@ type EditorCloseReason = 'enter' | 'tab' | 'escape' | 'blur' | 'scroll';
 
 | Method | Signature | Description |
 |---|---|---|
-| `open` | `(row: number, col: number) => void` | Open editor on cell |
-| `commitAndClose` | `() => void` | Commit current value and close |
+| `open` | `(row: number, col: number, initialText?: string) => void` | Open editor on cell |
+| `commitAndClose` | `(reason: EditorCloseReason) => void` | Commit current value and close |
 | `cancelAndClose` | `() => void` | Discard changes and close |
-| `isEditing` | `() => boolean` | Whether editor is currently open |
+| `isEditing` | `boolean` (getter) | Whether editor is currently open |
+
+## See Also
+
+- [Date & DateTime Editors](/guides/date-editors/) — calendar overlay for date and datetime cells
+- [Cell Editor Registry](/guides/cell-editor-registry/) — register custom editors and control editor selection
diff --git a/packages/site/src/content/docs/guides/features.mdx b/packages/site/src/content/docs/guides/features.mdx
index 5b292d7..81b9e4e 100644
--- a/packages/site/src/content/docs/guides/features.mdx
+++ b/packages/site/src/content/docs/guides/features.mdx
@@ -3,8 +3,6 @@ title: Features Overview
 description: "Complete feature map of @witqq/spreadsheet with links to detailed documentation."
 ---
 
-# Features Overview
-
 @witqq/spreadsheet is a canvas-based spreadsheet engine for the web. This page maps every capability to its documentation.
 
 ## Core Engine
@@ -13,7 +11,7 @@ description: "Complete feature map of @witqq/spreadsheet with links to detailed
 |---|---|---|
 | Canvas 2D Rendering | Layer-based pipeline, 60 FPS at 100K+ rows | [Rendering](/concepts/rendering/) |
 | Data Model | Sparse CellStore, RowStore, ColStore, StylePool | [Data Model](/concepts/data-model/) |
-| Event System | Typed EventBus with 25+ events | [Events](/concepts/events/) |
+| Event System | Typed EventBus with 36 events | [Events](/concepts/events/) |
 | Themes | Light/dark themes, runtime switching, full customization | [Themes](/concepts/themes/) |
 | Architecture | Zero-dependency core, plugin system, framework wrappers | [Architecture](/concepts/architecture/) |
 
@@ -30,10 +28,12 @@ description: "Complete feature map of @witqq/spreadsheet with links to detailed
 | Feature | Description | Docs |
 |---|---|---|
 | Inline Editor | Textarea overlay, F2/double-click open, Enter/Escape/Tab | [Editing](/guides/editing/) |
+| Date & DateTime Editors | Calendar overlay, time spinners, keyboard navigation | [Date Editors](/guides/date-editors/) |
+| Cell Editor Registry | Custom editors, matcher-based selection, editor lifecycle | [Cell Editor Registry](/guides/cell-editor-registry/) |
 | Undo & Redo | 100-step command stack, Ctrl+Z / Ctrl+Y | [Undo & Redo](/guides/undo-redo/) |
 | Clipboard | Copy/Cut/Paste, TSV + HTML formats, Excel/Sheets interop | [Clipboard](/guides/clipboard/) |
 | Drag-to-Fill | Pattern detection (numbers, dates, text), merge-aware | [Autofill](/guides/autofill/) |
-| Validation | Column/cell rules: required, min/max, regex, custom | [Validation](/guides/validation/) |
+| Validation | Column/cell rules: required, range, regex, custom | [Validation](/guides/validation/) |
 | Change Tracking | Cell status lifecycle: changed → saving → saved, error | [Change Tracking](/guides/change-tracking/) |
 
 ## Data Management
@@ -76,10 +76,14 @@ description: "Complete feature map of @witqq/spreadsheet with links to detailed
 |---|---|---|
 | Performance | 100K rows default, 1M rows toggle, FPS counter, measureInitTime | [Performance](/getting-started/performance/) |
 | Column/Row Resize | Drag headers/row numbers, min/max constraints, undoable | [Resize](/guides/resize/) |
-| Context Menu | Right-click menu, extensible items, keyboard navigation | [Context Menu](/guides/context-menu/) |
+| Auto Row Height | Two-phase content measurement, per-row height calculation | [Auto Row Height](/guides/auto-row-height/) |
+| Text Wrapping | Word-wrap in columns, greedy line breaking, truncation | [Text Wrapping](/guides/text-wrapping/) |
+| Column Stretch | Fill container width — 'all' or 'last' mode | [Column Stretch](/guides/column-stretch/) |
+| Locale / i18n | Built-in locales, custom translations, runtime switching | [Locale System](/guides/locale/) |
+| Context Menu | Right-click menu, extensible items, submenus, keyboard navigation | [Context Menu](/guides/context-menu/) |
 | Accessibility | WCAG 2.1 AA, role=grid, aria-live announcements | [Accessibility](/guides/accessibility/) |
 | Print Support | @media print CSS, DOM table generation, maxPrintRows | [Print](/guides/print/) |
-| Cell Types | Built-in (string, number, boolean, date) + custom renderers | [Cell Types](/api/cell-types/) |
+| Cell Types | 14 cell types (string, number, boolean, date, datetime, select, etc.) with extensible renderers via CellTypeRegistry | [Cell Types](/api/cell-types/) |
 
 ## API Reference
 
diff --git a/packages/site/src/content/docs/guides/filtering.mdx b/packages/site/src/content/docs/guides/filtering.mdx
index 77f8433..0609c1f 100644
--- a/packages/site/src/content/docs/guides/filtering.mdx
+++ b/packages/site/src/content/docs/guides/filtering.mdx
@@ -51,8 +51,8 @@ function App() {
     <Spreadsheet
       columns={columns}
       data={data}
-      onFilterChange={(filters) => {
-        console.log('Active filters:', filters);
+      onFilterChange={(event) => {
+        console.log('Visible rows:', event.visibleRowCount, '/', event.totalRowCount);
       }}
     />
   );
diff --git a/packages/site/src/content/docs/guides/frozen-panes.mdx b/packages/site/src/content/docs/guides/frozen-panes.mdx
index 1b2a773..5623b68 100644
--- a/packages/site/src/content/docs/guides/frozen-panes.mdx
+++ b/packages/site/src/content/docs/guides/frozen-panes.mdx
@@ -1,13 +1,13 @@
 ---
 title: Frozen Rows & Columns
-description: Pin rows and columns with FrozenPaneManager for fixed headers, sidebars, and 4-region viewport rendering.
+description: Pin rows and columns for fixed headers, sidebars, and 4-region viewport rendering.
 ---
 
 import { FrozenPanesDemo } from '../../../components/demos/FrozenPanesDemo';
 import frozenPanesSource from '../../../components/demos/FrozenPanesDemo.tsx?raw';
 import { Code } from '@astrojs/starlight/components';
 
-Spreadsheet supports freezing rows and columns via `FrozenPaneManager`. Frozen rows stay pinned at the top and frozen columns stay pinned on the left as the user scrolls. The renderer splits the viewport into four independent regions: corner (frozen rows + frozen cols), frozen-row strip, frozen-col strip, and main scrollable content.
+Spreadsheet supports freezing rows and columns. Frozen rows stay pinned at the top and frozen columns stay pinned on the left as the user scrolls. The renderer splits the viewport into four independent regions: corner (frozen rows + frozen cols), frozen-row strip, frozen-col strip, and main scrollable content.
 
 Merged regions cannot span across frozen boundaries — a merge must be entirely within frozen or unfrozen space.
 
diff --git a/packages/site/src/content/docs/guides/locale.mdx b/packages/site/src/content/docs/guides/locale.mdx
new file mode 100644
index 0000000..f373730
--- /dev/null
+++ b/packages/site/src/content/docs/guides/locale.mdx
@@ -0,0 +1,118 @@
+---
+title: "Locale System"
+description: "Built-in locales, custom translations, runtime locale switching, and how locale affects date/number formatting and UI labels."
+---
+
+# Locale System
+
+The locale system translates UI labels (context menus, filters, date pickers) and controls date/number formatting. Pass a `SpreadsheetLocale` object to configure translations.
+
+## Configuration
+
+```ts
+import { ruLocale } from '@witqq/spreadsheet';
+
+<Spreadsheet
+  columns={columns}
+  data={data}
+  locale={ruLocale}
+/>
+```
+
+## Built-in Locales
+
+| Locale | Import | Format Locale |
+|---|---|---|
+| English (default) | `enLocale` | `en-US` |
+| Russian | `ruLocale` | `ru-RU` |
+
+English is the default when no locale is provided.
+
+## Locale Interface
+
+`SpreadsheetLocale` is organized by category. All fields are optional — missing keys fall back to English.
+
+### Categories
+
+**`formatLocale`** — BCP 47 tag for `toLocaleString()` and `toLocaleDateString()` formatting.
+
+**`contextMenu`** — 8 keys:
+`cut`, `copy`, `paste`, `sortAscending`, `sortDescending`, `insertRowAbove`, `insertRowBelow`, `deleteRow`
+
+**`datePicker`** — Calendar labels:
+`weekLabels` (7-tuple), `monthNames` (12-tuple), `today`, `ariaLabel`
+
+**`dateTimePicker`** — Time input labels:
+`hour`, `minute`, `now`, `ariaLabel`
+
+**`filter`** — 16 keys:
+`equals`, `notEquals`, `contains`, `startsWith`, `endsWith`, `greaterThan`, `lessThan`, `greaterOrEqual`, `lessOrEqual`, `between`, `isEmpty`, `isNotEmpty`, `valuePlaceholder`, `toValuePlaceholder`, `apply`, `clear`
+
+**`grouping`** — Aggregate labels:
+`sum`, `count`, `avg`, `min`, `max`
+
+**`emptyState`** — `noData`
+
+**`print`** — `showingRows` (template with `{shown}` and `{total}` placeholders)
+
+**`aria`** — Accessibility announcements:
+`cellAnnouncement`, `cellEmpty`, `sortCleared`, `sortAscending`, `sortDescending`, `sortedBy`, `filterCleared`, `filterActive`
+
+## Creating Custom Locales
+
+Supply a partial `SpreadsheetLocale` — only override the keys you need:
+
+```ts
+const deLocale: SpreadsheetLocale = {
+  formatLocale: 'de-DE',
+  contextMenu: {
+    cut: 'Ausschneiden',
+    copy: 'Kopieren',
+    paste: 'Einfügen',
+    sortAscending: 'Aufsteigend sortieren',
+    sortDescending: 'Absteigend sortieren',
+    insertRowAbove: 'Zeile oben einfügen',
+    insertRowBelow: 'Zeile unten einfügen',
+    deleteRow: 'Zeile löschen',
+  },
+  filter: {
+    apply: 'Anwenden',
+    clear: 'Löschen',
+  },
+};
+```
+
+## Fallback Behavior
+
+`resolveLocale()` performs a shallow merge per category:
+
+```
+resolved.contextMenu = { ...enLocale.contextMenu, ...locale.contextMenu }
+resolved.filter = { ...enLocale.filter, ...locale.filter }
+// ... for each category
+```
+
+Any key not provided in the custom locale uses its English value.
+
+## Runtime Locale Switching
+
+Call `engine.setLocale(locale)` to change the locale after initialization. This:
+
+1. Merges the new locale with English defaults
+2. Propagates to 7 subsystems: context menu, cell editor registry, filter panel, grid renderer, row group manager, ARIA manager, print manager
+3. Updates `formatLocale` on the cell type registry (affects number and date rendering)
+4. Marks the grid dirty and triggers a re-render
+
+## Date and Number Formatting
+
+The `formatLocale` string (BCP 47 tag) controls how numbers and dates are displayed:
+
+- **Numbers**: `value.toLocaleString(formatLocale)` — applies locale-specific thousands separators and decimal points
+- **Dates**: `date.toLocaleDateString(formatLocale)` — applies locale-specific date formatting
+
+Setting `formatLocale: 'de-DE'` displays `1.234,56` instead of `1,234.56` for numbers, and `15.3.2025` instead of `3/15/2025` for dates.
+
+## See Also
+
+- [Date & DateTime Editors](/guides/date-editors/) — calendar labels are locale-aware
+- [Cell Editor Registry](/guides/cell-editor-registry/) — locale propagation to editors
diff --git a/packages/site/src/content/docs/guides/migration-from-handsontable.mdx b/packages/site/src/content/docs/guides/migration-from-handsontable.mdx
index 45ae9bc..7247551 100644
--- a/packages/site/src/content/docs/guides/migration-from-handsontable.mdx
+++ b/packages/site/src/content/docs/guides/migration-from-handsontable.mdx
@@ -24,9 +24,9 @@ const hot = new Handsontable(container, {
 ### @witqq/spreadsheet
 
 ```ts
-import { WitEngine } from '@witqq/spreadsheet';
+import { SpreadsheetEngine } from '@witqq/spreadsheet';
 
-const engine = new WitEngine({
+const engine = new SpreadsheetEngine({
   columns: [
     { key: 'name', title: 'Name', width: 150, type: 'string' },
     { key: 'age', title: 'Age', width: 80, type: 'number' },
@@ -114,7 +114,7 @@ engine.on('cellChange', (event) => {
 hot.getPlugin('columnSorting').sort({ column: 0, sortOrder: 'asc' });
 
 // @witqq/spreadsheet
-engine.sortBy(0, 'asc');           // single column
+engine.sortBy([{ col: 0, direction: 'asc' }]);
 engine.sortBy([                    // multi-column
   { col: 0, direction: 'asc' },
   { col: 2, direction: 'desc' },
@@ -133,13 +133,13 @@ hot.getPlugin('filters').addCondition(0, 'contains', ['text']);
 hot.getPlugin('filters').filter();
 
 // @witqq/spreadsheet
-engine.setColumnFilter(0, { operator: 'contains', value: 'text' });
+engine.setColumnFilter(0, [{ col: 0, operator: 'contains', value: 'text' }]);
 engine.removeColumnFilter(0);
 engine.clearFilters();
 engine.getFilteredRowCount();      // visible rows after filter
 ```
 
-Supported operators: `equals`, `notEquals`, `contains`, `notContains`, `startsWith`, `endsWith`, `greaterThan`, `lessThan`, `greaterThanOrEqual`, `lessThanOrEqual`, `between`, `notBetween`, `isEmpty`, `isNotEmpty`.
+Supported operators: `equals`, `notEquals`, `contains`, `startsWith`, `endsWith`, `greaterThan`, `lessThan`, `greaterThanOrEqual`, `lessThanOrEqual`, `between`, `in`, `notIn`, `isEmpty`, `isNotEmpty`.
 
 ## Frozen Panes
 
@@ -148,7 +148,7 @@ Supported operators: `equals`, `notEquals`, `contains`, `notContains`, `startsWi
 new Handsontable(el, { fixedRowsTop: 2, fixedColumnsLeft: 1 });
 
 // @witqq/spreadsheet
-new WitEngine({ frozenRows: 2, frozenColumns: 1, columns: [...] });
+new SpreadsheetEngine({ frozenRows: 2, frozenColumns: 1, columns: [...] });
 ```
 
 ## Merged Cells
@@ -159,8 +159,8 @@ new Handsontable(el, { mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 3 }]
 
 // @witqq/spreadsheet
 engine.mergeCells({ startRow: 0, startCol: 0, endRow: 1, endCol: 2 });
-engine.unmergeCells({ startRow: 0, startCol: 0, endRow: 1, endCol: 2 });
-engine.getMergedRegion(0, 0);      // MergedRegion | undefined
+engine.unmergeCells(0, 0);
+engine.getMergedRegion(0, 0);      // MergedRegion | null
 ```
 
 ## Plugins
@@ -174,9 +174,9 @@ Handsontable.plugins.registerPlugin('MyPlugin', MyPlugin);
 ### @witqq/spreadsheet
 
 ```ts
-import type { WitPlugin, PluginAPI } from '@witqq/spreadsheet';
+import type { SpreadsheetPlugin, PluginAPI } from '@witqq/spreadsheet';
 
-const myPlugin: WitPlugin = {
+const myPlugin: SpreadsheetPlugin = {
   name: 'my-plugin',
   version: '1.0.0',
   install(api: PluginAPI) {
@@ -195,7 +195,7 @@ engine.getPlugin('my-plugin');
 ```
 
 **Key differences:**
-- Plugins are plain objects implementing `WitPlugin` interface (no class registration)
+- Plugins are plain objects implementing `SpreadsheetPlugin` interface (no class registration)
 - `PluginAPI` provides isolated state via `getPluginState` / `setPluginState`
 - Plugin dependencies declared via `dependencies: ['other-plugin']`
 
@@ -233,14 +233,14 @@ columns: [{ validator: (value, callback) => callback(value > 0) }]
 // @witqq/spreadsheet
 engine.setColumnValidation(0, [
   { type: 'required', message: 'Value is required' },
-  { type: 'min', min: 0, message: 'Must be positive' },
+  { type: 'range', min: 0, message: 'Must be positive' },
 ]);
 engine.setCellValidation(0, 0, [
-  { type: 'custom', validate: (v) => v !== null, message: 'Cannot be null' },
+  { type: 'custom', validate: (v) => ({ valid: v !== null }), message: 'Cannot be null' },
 ]);
 ```
 
-Built-in rules: `required`, `min`, `max`, `range`, `minLength`, `maxLength`, `pattern` (regex), `custom` (function).
+Built-in rules: `required`, `range` (min/max), `regex` (pattern string with optional flags), `custom` (function).
 
 ## Theming
 
@@ -249,14 +249,14 @@ Built-in rules: `required`, `min`, `max`, `range`, `minLength`, `maxLength`, `pa
 // @witqq/spreadsheet — theme object
 import { lightTheme, darkTheme } from '@witqq/spreadsheet';
 
-const engine = new WitEngine({ theme: darkTheme, columns: [...] });
+const engine = new SpreadsheetEngine({ theme: darkTheme, columns: [...] });
 engine.setTheme(lightTheme);  // switch at runtime
 ```
 
 Create custom themes by spreading a built-in theme:
 
 ```ts
-const myTheme: WitTheme = {
+const myTheme: SpreadsheetTheme = {
   ...lightTheme,
   name: 'my-theme',
   colors: { ...lightTheme.colors, background: '#f5f5f5' },
@@ -271,9 +271,9 @@ import { HotTable } from '@handsontable/react';
 <HotTable data={data} columns={columns} />
 
 // @witqq/spreadsheet
-import { WitTable, WitTableRef } from '@witqq/spreadsheet-react';
-const ref = useRef<WitTableRef>(null);
-<WitTable
+import { Spreadsheet, SpreadsheetRef } from '@witqq/spreadsheet-react';
+const ref = useRef<SpreadsheetRef>(null);
+<Spreadsheet
   ref={ref}
   columns={columns}
   data={data}
diff --git a/packages/site/src/content/docs/guides/print.mdx b/packages/site/src/content/docs/guides/print.mdx
index a80afa4..0740c74 100644
--- a/packages/site/src/content/docs/guides/print.mdx
+++ b/packages/site/src/content/docs/guides/print.mdx
@@ -46,16 +46,7 @@ function App() {
 
 ## maxPrintRows
 
-Large datasets are capped at `maxPrintRows` (default: 10,000) to prevent browser freezes. When truncated, a notice is appended to the printed output indicating how many rows were omitted.
-
-```tsx
-<Spreadsheet
-  ref={ref}
-  columns={columns}
-  data={data}
-  maxPrintRows={5000}
-/>
-```
+Large datasets are capped at 10,000 rows by default to prevent browser freezes. When truncated, a notice is appended to the printed output indicating how many rows were omitted. Configurable via `PrintManagerConfig.maxPrintRows` at the engine level.
 
 ## How It Works
 
@@ -71,6 +62,6 @@ Large datasets are capped at `maxPrintRows` (default: 10,000) to prevent browser
 
 | Method | Signature | Description |
 |---|---|---|
-| `attach` | `(engine: SpreadsheetEngine) => void` | Attach to engine instance |
+| `attach` | `() => void` | Inject @media print CSS into document |
 | `detach` | `() => void` | Detach and clean up |
 | `print` | `() => void` | Generate DOM table and trigger print |
diff --git a/packages/site/src/content/docs/guides/resize.mdx b/packages/site/src/content/docs/guides/resize.mdx
index 2795e3c..f3322cf 100644
--- a/packages/site/src/content/docs/guides/resize.mdx
+++ b/packages/site/src/content/docs/guides/resize.mdx
@@ -36,9 +36,6 @@ function App() {
     <Spreadsheet
       columns={columns}
       data={data}
-      onColumnResize={(col, width) => {
-        console.log(`Column ${col} resized to ${width}px`);
-      }}
     />
   );
 }
@@ -46,26 +43,31 @@ function App() {
 
 ## Resize Events
 
-Listen to resize lifecycle events for custom behavior:
+Listen to resize lifecycle events via the engine's EventBus:
 
 ```tsx
-<Spreadsheet
-  columns={columns}
-  data={data}
-  onColumnResizeStart={(col, startWidth) => {
-    console.log('Resize started:', col);
-  }}
-  onColumnResizeEnd={(col, newWidth) => {
-    // Persist new width to backend
-    saveColumnWidth(col, newWidth);
-  }}
-  onRowResizeStart={(row, startHeight) => {
-    console.log('Row resize started:', row);
-  }}
-  onRowResizeEnd={(row, newHeight) => {
-    saveRowHeight(row, newHeight);
-  }}
-/>
+import { useRef, useEffect } from 'react';
+import { Spreadsheet } from '@witqq/spreadsheet-react';
+import type { SpreadsheetRef } from '@witqq/spreadsheet-react';
+
+function App() {
+  const ref = useRef<SpreadsheetRef>(null);
+
+  useEffect(() => {
+    const engine = ref.current?.getInstance();
+    if (!engine) return;
+
+    engine.on('columnResizeEnd', (event) => {
+      // Persist new width to backend
+      saveColumnWidth(event.colIndex, event.newWidth);
+    });
+    engine.on('rowResizeEnd', (event) => {
+      saveRowHeight(event.rowIndex, event.newHeight);
+    });
+  }, []);
+
+  return <Spreadsheet ref={ref} columns={columns} data={data} />;
+}
 ```
 
 ## API Reference
diff --git a/packages/site/src/content/docs/guides/selection.mdx b/packages/site/src/content/docs/guides/selection.mdx
index 90f8fcc..af92e0e 100644
--- a/packages/site/src/content/docs/guides/selection.mdx
+++ b/packages/site/src/content/docs/guides/selection.mdx
@@ -49,9 +49,9 @@ function App() {
     <Spreadsheet
       columns={columns}
       data={data}
-      onSelectionChange={(selection) => {
-        console.log('Active cell:', selection.activeCell);
-        console.log('Ranges:', selection.ranges);
+      onSelectionChange={(event) => {
+        console.log('Active cell:', event.selection.activeCell);
+        console.log('Ranges:', event.selection.ranges);
       }}
     />
   );
diff --git a/packages/site/src/content/docs/guides/sorting.mdx b/packages/site/src/content/docs/guides/sorting.mdx
index 4c5deb1..aff9fff 100644
--- a/packages/site/src/content/docs/guides/sorting.mdx
+++ b/packages/site/src/content/docs/guides/sorting.mdx
@@ -37,8 +37,8 @@ function App() {
       columns={columns}
       data={data}
       sortable={true}
-      onSortChange={(sortColumns) => {
-        console.log('Sort changed:', sortColumns);
+      onSortChange={(event) => {
+        console.log('Sort changed:', event.sortColumns);
       }}
     />
   );
@@ -74,7 +74,7 @@ const cols = ref.current?.getInstance().getSortEngine().sortColumns;
 
 | Method | Signature | Description |
 |---|---|---|
-| `toggleColumn` | `(col: number) => SortColumn[]` | Cycle sort on column (none→asc→desc→none) |
+| `toggleColumn` | `(col: number, multiColumn?: boolean) => SortColumn[]` | Cycle sort on column (none→asc→desc→none) |
 | `setSortColumns` | `(columns: SortColumn[]) => void` | Set full sort state |
 | `clearSort` | `() => void` | Remove all sorting |
 | `sortColumns` | `readonly SortColumn[]` | Current sort columns (getter) |
@@ -96,7 +96,7 @@ The low-level comparison function used by `SortEngine`:
 import { compareCellValues } from '@witqq/spreadsheet';
 
 // Type-aware: number < boolean < string, nulls always last
-compareCellValues(valA, valB, 'asc'); // -1 | 0 | 1
+compareCellValues(valA, valB); // -1 | 0 | 1
 ```
 
 ## See Also
diff --git a/packages/site/src/content/docs/guides/text-wrapping.mdx b/packages/site/src/content/docs/guides/text-wrapping.mdx
new file mode 100644
index 0000000..0b869e0
--- /dev/null
+++ b/packages/site/src/content/docs/guides/text-wrapping.mdx
@@ -0,0 +1,96 @@
+---
+title: "Text Wrapping"
+description: "Per-column word wrap with automatic line breaking, ellipsis truncation, and cached text measurement."
+---
+
+# Text Wrapping
+
+By default, cell text is rendered on a single line and truncated with an ellipsis (`…`) when it overflows. Enable `wrapText` on a column to wrap long text into multiple lines within the cell.
+
+## Configuration
+
+Set `wrapText: true` on a `ColumnDef`:
+
+```ts
+const columns: ColumnDef[] = [
+  { key: 'id', title: 'ID', width: 60 },
+  { key: 'notes', title: 'Notes', width: 250, wrapText: true },
+  { key: 'description', title: 'Description', width: 300, wrapText: true },
+];
+```
+
+:::note
+`CellStyle.textWrap` is defined in the interface but is not currently read by the renderer. Use `ColumnDef.wrapText` for wrapping control.
+:::
+
+## Wrapping Behavior
+
+### Wrapped Text (`wrapText: true`)
+
+1. Text is split on explicit `\n` newlines
+2. Each paragraph is broken into words by whitespace
+3. Words are placed greedily until the line exceeds the available width
+4. If a single word is wider than the column, it is split character-by-character
+5. Lines are rendered vertically centered within the cell
+
+```
+Available width: 200px
+Text: "This is a long sentence that will wrap"
+
+Line 1: "This is a long"
+Line 2: "sentence that will"
+Line 3: "wrap"
+```
+
+### Non-Wrapped Text (Default)
+
+When `wrapText` is not set:
+
+1. Text is measured against available cell width
+2. If it overflows, a binary search finds the longest prefix that fits
+3. An ellipsis (`…`) is appended
+4. Result: `"This is a long sen…"`
+
+## Text Alignment
+
+Both wrapped and non-wrapped text respect horizontal alignment. Alignment is determined by the cell type renderer. Each wrapped line is aligned independently.
+
+## Auto Row Height
+
+Wrapped text only affects row height when [`autoRowHeight`](/guides/auto-row-height/) is enabled. Without it, wrapped text that exceeds the fixed row height is clipped.
+
+```ts
+<Spreadsheet
+  columns={columns}
+  data={data}
+  autoRowHeight={true}
+/>
+```
+
+With auto row height, the engine measures the height of wrapped content and expands the row. The height formula is:
+
+```
+lineCount × emHeight × 1.2 + cellPadding
+```
+
+Where `emHeight` is measured from the font's `actualBoundingBoxAscent + actualBoundingBoxDescent`.
+
+## Performance
+
+Text measurement uses a `TextMeasureCache` with three internal caches:
+
+| Cache | Purpose | Capacity |
+|---|---|---|
+| Width cache | `measureText()` results | LRU, 10K entries |
+| Wrap cache | `getWrappedLines()` line arrays | Keyed by font + text + maxWidth |
+| Height cache | `measureEmHeight()` font metrics | Keyed by font string |
+
+Cache keys include font information, so theme or style changes produce fresh measurements.
+
+Column resize on a `wrapText` column invalidates auto row height measurements for all rows, since available width changes affect line breaking.
+
+## See Also
+
+- [Auto Row Height](/guides/auto-row-height/) — automatic row sizing based on wrapped content
+- [Column Stretch](/guides/column-stretch/) — auto-filling container width affects available wrap width
+- [Column & Row Resize](/guides/resize/) — manual column resize triggers re-wrap
diff --git a/packages/site/src/content/docs/guides/undo-redo.mdx b/packages/site/src/content/docs/guides/undo-redo.mdx
index 9ef829f..04d9e4e 100644
--- a/packages/site/src/content/docs/guides/undo-redo.mdx
+++ b/packages/site/src/content/docs/guides/undo-redo.mdx
@@ -33,10 +33,10 @@ The history stack holds up to 100 commands by default. When the limit is reached
 
 ## Undo/Redo Buttons
 
-Expose undo and redo through toolbar buttons via ref:
+Expose undo and redo through toolbar buttons via ref. Use `commandExecute`, `commandUndo`, and `commandRedo` events to track state:
 
 ```tsx
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Spreadsheet, SpreadsheetRef } from '@witqq/spreadsheet-react';
 
 function App() {
@@ -44,6 +44,27 @@ function App() {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
 
+  useEffect(() => {
+    const engine = ref.current?.getInstance();
+    if (!engine) return;
+
+    const updateState = () => {
+      const cm = engine.getCommandManager();
+      setCanUndo(cm.canUndo());
+      setCanRedo(cm.canRedo());
+    };
+
+    engine.on('commandExecute', updateState);
+    engine.on('commandUndo', updateState);
+    engine.on('commandRedo', updateState);
+
+    return () => {
+      engine.off('commandExecute', updateState);
+      engine.off('commandUndo', updateState);
+      engine.off('commandRedo', updateState);
+    };
+  }, []);
+
   return (
     <>
       <button
@@ -63,10 +84,6 @@ function App() {
         columns={columns}
         data={data}
         editable={true}
-        onCommandExecuted={() => {
-          setCanUndo(ref.current?.getInstance().getCommandManager().canUndo() ?? false);
-          setCanRedo(ref.current?.getInstance().getCommandManager().canRedo() ?? false);
-        }}
       />
     </>
   );
@@ -80,8 +97,8 @@ function App() {
 | Method | Signature | Description |
 |---|---|---|
 | `execute` | `(command: Command) => void` | Execute and push to history |
-| `undo` | `() => void` | Undo last command |
-| `redo` | `() => void` | Redo last undone command |
+| `undo` | `() => Command \| undefined` | Undo last command |
+| `redo` | `() => Command \| undefined` | Redo last undone command |
 | `canUndo` | `() => boolean` | Whether undo is available |
 | `canRedo` | `() => boolean` | Whether redo is available |
 | `clear` | `() => void` | Clear entire history |
@@ -92,6 +109,6 @@ function App() {
 interface Command {
   execute(): void;
   undo(): void;
-  description: string;
+  readonly description: string;
 }
 ```
diff --git a/packages/site/src/content/docs/guides/validation.mdx b/packages/site/src/content/docs/guides/validation.mdx
index d74ab31..abde05a 100644
--- a/packages/site/src/content/docs/guides/validation.mdx
+++ b/packages/site/src/content/docs/guides/validation.mdx
@@ -47,7 +47,7 @@ const columns: ColumnDef[] = [
     editable: true,
     validation: [
       { type: 'required', message: 'Email is required', severity: 'error' },
-      { type: 'regex', pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email', severity: 'error' },
+      { type: 'regex', pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$', message: 'Invalid email', severity: 'error' },
     ],
   },
   {
@@ -78,7 +78,7 @@ ve.setColumnRules(1, [
 
 // Set cell-level rules
 ve.setCellRules(0, 2, [
-  { type: 'custom', validate: (value) => value > 0, message: 'Must be positive', severity: 'warning' },
+  { type: 'custom', validate: (value) => ({ valid: Number(value) > 0 }), message: 'Must be positive', severity: 'warning' },
 ]);
 
 // Validate a specific cell
@@ -101,10 +101,10 @@ const result = ve.validateCell(0, 1);
 
 ```typescript
 type SpreadsheetValidationRule =
-  | { type: 'required'; message: string; severity: Severity }
-  | { type: 'range'; min?: number; max?: number; message: string; severity: Severity }
-  | { type: 'regex'; pattern: RegExp; message: string; severity: Severity }
-  | { type: 'custom'; validate: (value: unknown) => boolean; message: string; severity: Severity };
+  | { type: 'required'; message?: string; severity?: 'error' | 'warning' | 'info' }
+  | { type: 'range'; min?: number; max?: number; message?: string; severity?: 'error' | 'warning' | 'info' }
+  | { type: 'regex'; pattern: string; flags?: string; message?: string; severity?: 'error' | 'warning' | 'info' }
+  | { type: 'custom'; validate: (value: CellValue) => ValidationResult; message?: string; severity?: 'error' | 'warning' | 'info' };
 
-type Severity = 'error' | 'warning' | 'info';
+type ValidationResult = { valid: boolean; message?: string; severity?: 'error' | 'warning' | 'info' };
 ```
diff --git a/packages/site/src/content/docs/plugins/collaboration.mdx b/packages/site/src/content/docs/plugins/collaboration.mdx
index 90b7017..fb2c011 100644
--- a/packages/site/src/content/docs/plugins/collaboration.mdx
+++ b/packages/site/src/content/docs/plugins/collaboration.mdx
@@ -131,10 +131,10 @@ interface VersionedOperation {
 The OT engine handles all 9 operation pairs (3×3 matrix):
 
 ```typescript
-import { transform, transformAgainstAll } from '@witqq/spreadsheet-plugins';
+import { otTransform, transformAgainstAll } from '@witqq/spreadsheet-plugins';
 
-// Transform opA against opB → [opA', opB']
-const [aPrime, bPrime] = transform(opA, opB);
+// Transform opA against opB → [opA', opB'] (either may be null for no-op)
+const [aPrime, bPrime] = otTransform(opA, opB);
 
 // Transform local op against a list of server ops
 const transformed = transformAgainstAll(localOp, serverOps);
@@ -282,7 +282,7 @@ Cursor updates are relayed to all other clients without transformation. Each cur
 
 When the last client disconnects, the server resets its state:
 - Clears operation history
-- Resets revision counter to 1
+- Resets revision counter (first client receives revision `0`)
 
 This ensures a clean state for the next session.
 
diff --git a/packages/site/src/content/docs/plugins/conditional-format.mdx b/packages/site/src/content/docs/plugins/conditional-format.mdx
index 988f1da..26b6ab4 100644
--- a/packages/site/src/content/docs/plugins/conditional-format.mdx
+++ b/packages/site/src/content/docs/plugins/conditional-format.mdx
@@ -35,10 +35,10 @@ Apply a style when a cell value matches a comparison:
 
 ```ts
 interface ValueCondition {
-  type: 'value';
-  operator: ComparisonOperator;
-  value: number;
-  value2?: number; // Required for 'between' / 'notBetween'
+  readonly type: 'value';
+  readonly operator: ComparisonOperator;
+  readonly value: number;
+  readonly value2?: number; // Required for 'between' / 'notBetween'
 }
 ```
 
@@ -48,8 +48,8 @@ Interpolate colors across a numeric range:
 
 ```ts
 interface GradientScaleCondition {
-  type: 'gradientScale';
-  stops: readonly { value: number; color: string }[];
+  readonly type: 'gradientScale';
+  readonly stops: readonly { value: number; color: string }[];
 }
 ```
 
@@ -59,32 +59,34 @@ Fill a portion of the cell background proportional to the value:
 
 ```ts
 interface DataBarCondition {
-  type: 'dataBar';
-  minValue?: number;
-  maxValue?: number;
-  color: string;
-  showValue?: boolean;
+  readonly type: 'dataBar';
+  readonly minValue?: number;
+  readonly maxValue?: number;
+  readonly color: string;
+  readonly showValue?: boolean;
 }
 ```
 
+> **Note:** `showValue` is accepted in the condition but is currently a no-op — cell values are always shown alongside data bars and icons.
+
 ### Icon Set
 
 Display an icon based on value thresholds:
 
 ```ts
 interface IconSetCondition {
-  type: 'iconSet';
-  iconSet: IconSetName; // 'arrows' | 'circles' | 'flags' | 'stars'
-  thresholds: readonly { value: number; icon: string }[];
-  showValue?: boolean;
+  readonly type: 'iconSet';
+  readonly iconSet: IconSetName; // 'arrows' | 'circles' | 'flags' | 'stars'
+  readonly thresholds: readonly { value: number; icon: string }[];
+  readonly showValue?: boolean;
 }
 ```
 
 Built-in icon sets:
-- **arrows** — `▲` `▶` `▼`
-- **circles** — colored circles
-- **flags** — flag indicators
-- **stars** — star ratings
+- **arrows** — `▲` `▶` `▼` (thresholds at 67, 33, 0)
+- **circles** — `🟢` `🟡` `🔴` (thresholds at 67, 33, 0)
+- **flags** — `🟩` `🟨` `🟥` colored squares (thresholds at 67, 33, 0)
+- **stars** — `★★★` `★★☆` `★☆☆` `☆☆☆` (4 levels; thresholds at 80, 60, 40, 0)
 
 ## Comparison Operators
 
@@ -231,7 +233,7 @@ The conditional formatting layer uses several internal utilities:
 | `toNumber(value)` | Convert cell value to number for comparison |
 | `evaluateComparison(value, operator, threshold, threshold2?)` | Evaluate a comparison condition |
 | `interpolateColor(value, stops)` | Interpolate between color stops for gradient scales |
-| `getLayer()` | Access the `ConditionalFormatLayer` render layer instance |
+| `getLayer()` | Access the `ConditionalFormatLayer` render layer instance (returns `null` if plugin not installed) |
 
 ## API Types
 
diff --git a/packages/site/src/content/docs/plugins/custom-functions.mdx b/packages/site/src/content/docs/plugins/custom-functions.mdx
index 1f43e33..e9d9c77 100644
--- a/packages/site/src/content/docs/plugins/custom-functions.mdx
+++ b/packages/site/src/content/docs/plugins/custom-functions.mdx
@@ -7,6 +7,8 @@ description: "Extend the formula engine with your own spreadsheet functions."
 
 The formula engine can be extended with custom functions by working with the `FormulaComputeEngine` directly. Custom functions follow the same signature as built-in functions and integrate with the dependency graph for automatic recalculation.
 
+> **Note:** The built-in function registry is module-private. There is currently no public API to register custom functions at runtime. The patterns below show how custom function implementations work and can be used when forking or extending the formula module.
+
 ## FormulaComputeEngine
 
 The compute engine handles formula evaluation and cell dependency tracking:
@@ -112,10 +114,10 @@ function lookupFn(
   }
 
   // Iterate search range rows
-  for (let row = searchRange.startRow; row <= searchRange.endRow; row++) {
-    const cellValue = resolver.getCellValue(row, searchRange.startCol);
+  for (let row = searchRange.start.row; row <= searchRange.end.row; row++) {
+    const cellValue = resolver.getCellValue(row, searchRange.start.col);
     if (cellValue === searchValue) {
-      return resolver.getCellValue(row, resultRange.startCol);
+      return resolver.getCellValue(row, resultRange.start.col);
     }
   }
 
diff --git a/packages/site/src/content/docs/plugins/formulas.mdx b/packages/site/src/content/docs/plugins/formulas.mdx
index 00e42e2..ee77bad 100644
--- a/packages/site/src/content/docs/plugins/formulas.mdx
+++ b/packages/site/src/content/docs/plugins/formulas.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Formula Engine"
-description: "Spreadsheet formulas with cell references, 20+ built-in functions, and automatic recalculation."
+description: "Spreadsheet formulas with cell references, 19 built-in functions, and automatic recalculation."
 ---
 
 import { FormulaDemo } from '../../../components/demos/FormulaDemo';
@@ -124,12 +124,10 @@ Changing `A1` to `5` triggers: `B1` → `10`, then `C1` → `15`.
 
 | Error | Cause |
 |---|---|
-| `#REF!` | Invalid cell reference |
+| `#REF!` | Invalid cell reference or circular reference |
 | `#VALUE!` | Wrong argument type |
 | `#DIV/0!` | Division by zero |
 | `#NAME?` | Unknown function name |
-| `#NUM!` | Invalid numeric value |
-| `#NULL!` | Null intersection of ranges |
 
 ## Usage with React
 
@@ -216,6 +214,19 @@ extractDependencies(ast);     // ["0:0", "1:0", "1:1", ...] — all referenced c
 
 The dependency graph performs topological sort for recalculation order and detects circular references.
 
+### Convenience Helpers
+
+```typescript
+import { evaluateFormula, colLetterToIndex, colIndexToLetter } from '@witqq/spreadsheet-plugins';
+
+// One-shot formula evaluation (tokenize → parse → evaluate)
+const result = evaluateFormula('=SUM(A1:A10)', resolver);
+
+// Column letter/index conversion
+colLetterToIndex('C');   // 2
+colIndexToLetter(2);     // "C"
+```
+
 ## Worker Mode
 
 For large datasets, offload formula evaluation to a Web Worker:
@@ -295,12 +306,13 @@ interface PercentNode { type: 'Percent'; operand: ASTNode; }
 interface ErrorNode { type: 'Error'; error: FormulaError; }
 ```
 
-### FunctionDef
+### Function Implementation (Internal)
 
-Signature for built-in function implementations used by the evaluator.
+The built-in function registry is module-private and cannot be extended at runtime. Each function implementation follows this internal signature:
 
 ```ts
-type FunctionDef = (
+// Internal type — not exported
+type FnImpl = (
   args: ASTNode[],
   resolver: CellValueResolver,
   evalNode: (node: ASTNode) => FormulaResult,
@@ -315,3 +327,4 @@ Interface for resolving cell values during formula evaluation.
 interface CellValueResolver {
   getCellValue(row: number, col: number): unknown;
 }
+```
diff --git a/packages/site/src/content/docs/plugins/overview.mdx b/packages/site/src/content/docs/plugins/overview.mdx
index 10b3b9f..db18764 100644
--- a/packages/site/src/content/docs/plugins/overview.mdx
+++ b/packages/site/src/content/docs/plugins/overview.mdx
@@ -37,8 +37,8 @@ interface SpreadsheetPlugin {
 | `name` | Unique identifier (e.g. `'formula'`, `'conditional-format'`) |
 | `version` | Semver string |
 | `dependencies` | Optional array of plugin names that must be installed first |
-| `install(api)` | Called when the plugin is added to the engine |
-| `destroy()` | Optional cleanup — unbind events, remove layers |
+| `install(api)` | Called when the plugin is added to the engine. If the engine is not yet mounted, `install()` is deferred until `engine.mount()` is called |
+| `destroy()` | Optional cleanup — plugins must manually unbind event handlers and remove layers |
 
 ## PluginAPI
 
@@ -67,6 +67,8 @@ engine.installPlugin(myPlugin);
 engine.removePlugin('my-plugin');
 ```
 
+When `engine.destroy()` is called, plugins are destroyed in **reverse installation order**.
+
 ### Via React ref
 
 ```tsx
@@ -81,7 +83,7 @@ tableRef.current?.removePlugin('my-plugin');
 
 | Plugin | Package | Description |
 |---|---|---|
-| `FormulaPlugin` | `@witqq/spreadsheet-plugins` | Spreadsheet formulas with dependency graph |
+| `FormulaPlugin` | `@witqq/spreadsheet-plugins` | Spreadsheet formulas with dependency graph. Supports `worker` option for off-thread calculation |
 | `ConditionalFormattingPlugin` | `@witqq/spreadsheet-plugins` | Color scales, data bars, icon sets |
 | `ExcelPlugin` | `@witqq/spreadsheet-plugins` | Import/export `.xlsx` via lazy-loaded SheetJS |
 | `createContextMenuPlugin` | `@witqq/spreadsheet-plugins` | Right-click context menu with custom items |
@@ -93,7 +95,7 @@ tableRef.current?.removePlugin('my-plugin');
 A plugin that highlights the active row:
 
 ```ts
-import type { SpreadsheetPlugin, PluginAPI } from '@witqq/spreadsheet';
+import type { SpreadsheetPlugin, PluginAPI, SelectionChangeEvent } from '@witqq/spreadsheet';
 
 const activeRowPlugin: SpreadsheetPlugin = {
   name: 'active-row-highlight',
@@ -102,7 +104,7 @@ const activeRowPlugin: SpreadsheetPlugin = {
   install(api: PluginAPI) {
     const { engine } = api;
 
-    const handler = (event: { selection: Selection }) => {
+    const handler = (event: SelectionChangeEvent) => {
       const row = event.selection.activeCell.row;
       api.setPluginState('activeRow', row);
       engine.requestRender();
@@ -113,7 +115,8 @@ const activeRowPlugin: SpreadsheetPlugin = {
   },
 
   destroy() {
-    // Cleanup handled by engine when plugin is removed
+    // Plugins must manually unbind event handlers here.
+    // The engine does NOT auto-unbind handlers on plugin removal.
   },
 };
 ```
diff --git a/packages/site/src/content/docs/plugins/progressive-loader.mdx b/packages/site/src/content/docs/plugins/progressive-loader.mdx
index fa6282d..54a7bb6 100644
--- a/packages/site/src/content/docs/plugins/progressive-loader.mdx
+++ b/packages/site/src/content/docs/plugins/progressive-loader.mdx
@@ -114,7 +114,7 @@ The overlay supports both dark and light themes via `data-theme="light"` on the
 | Method | Return | Description |
 |---|---|---|
 | `start()` | `void` | Begin progressive loading (no-op if already loading) |
-| `cancel()` | `void` | Cancel ongoing loading, remove overlay |
+| `cancel()` | `void` | Cancel ongoing loading, immediately remove overlay |
 | `getProgress()` | `number` | Fraction loaded: `0` → `1` |
 | `isLoading()` | `boolean` | Whether loading is in progress |
 | `getLoadedRows()` | `number` | Number of rows loaded so far |
@@ -122,13 +122,15 @@ The overlay supports both dark and light themes via `data-theme="light"` on the
 ## Internal Loading Loop
 
 ```
+const BATCH_SIZE = 5000; // hardcoded
+
 while (loadedRows < totalRows) {
   if (cancelled) return;
   deadline = performance.now() + chunkBudgetMs;
 
-  while (row < totalRows && performance.now() < deadline) {
-    store.bulkGenerate(row, batchSize, columnKeys, generateRow);
-    row += batchSize;
+  while (loadedRows < totalRows && performance.now() < deadline) {
+    store.bulkGenerate(loadedRows, BATCH_SIZE, columnKeys, generateRow);
+    loadedRows += BATCH_SIZE;
   }
 
   engine.setRowCount(loadedRows);
@@ -140,7 +142,7 @@ while (loadedRows < totalRows) {
 }
 ```
 
-Each chunk uses `bulkGenerate` with a batch size of 5,000 rows for efficient CellStore writes. The engine re-renders and updates the overlay between chunks.
+Each chunk uses `bulkGenerate` with a fixed batch size of 5,000 rows for efficient CellStore writes. The engine re-renders and updates the overlay between chunks.
 
 ## Performance
 
diff --git a/packages/vue/src/Spreadsheet.ts b/packages/vue/src/Spreadsheet.ts
index 80c7210..44b3710 100644
--- a/packages/vue/src/Spreadsheet.ts
+++ b/packages/vue/src/Spreadsheet.ts
@@ -1,12 +1,4 @@
-import {
-  defineComponent,
-  ref,
-  h,
-  onMounted,
-  onUnmounted,
-  watch,
-  type PropType,
-} from 'vue';
+import { defineComponent, ref, h, onMounted, onUnmounted, watch, type PropType } from 'vue';
 import { SpreadsheetEngine } from '@witqq/spreadsheet';
 import type {
   SpreadsheetEngineConfig,
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 2ba3038..8237a18 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -22,8 +22,4 @@ export type {
   SpreadsheetTheme,
 } from '@witqq/spreadsheet';
 
-export {
-  SpreadsheetEngine,
-  lightTheme,
-  darkTheme,
-} from '@witqq/spreadsheet';
+export { SpreadsheetEngine, lightTheme, darkTheme } from '@witqq/spreadsheet';
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 4c6ee46..270996d 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -30,14 +30,9 @@ export interface WidgetConfig extends SpreadsheetEngineConfig {
  * @param config - Engine configuration (columns required)
  * @returns The SpreadsheetEngine instance for programmatic access
  */
-export function create(
-  container: HTMLElement | string,
-  config: WidgetConfig,
-): SpreadsheetEngine {
+export function create(container: HTMLElement | string, config: WidgetConfig): SpreadsheetEngine {
   const el =
-    typeof container === 'string'
-      ? document.querySelector<HTMLElement>(container)
-      : container;
+    typeof container === 'string' ? document.querySelector<HTMLElement>(container) : container;
 
   if (!el) {
     throw new Error(
@@ -73,10 +68,4 @@ export function embed(
 // Re-export core types needed by widget consumers
 export { SpreadsheetEngine, lightTheme, darkTheme };
 export type { SpreadsheetEngineConfig };
-export type {
-  ColumnDef,
-  CellData,
-  CellValue,
-  Selection,
-  CellAddress,
-} from '@witqq/spreadsheet';
+export type { ColumnDef, CellData, CellValue, Selection, CellAddress } from '@witqq/spreadsheet';
diff --git a/tests/e2e/context-menu-submenu-verification.test.ts b/tests/e2e/context-menu-submenu-verification.test.ts
new file mode 100644
index 0000000..d0818d0
--- /dev/null
+++ b/tests/e2e/context-menu-submenu-verification.test.ts
@@ -0,0 +1,266 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * E2E verification tests for context menu submenu functionality.
+ * Verifies: chevron indicator, submenu open on hover, keyboard navigation, empty menu prevention.
+ */
+test.describe('Context Menu Submenu Verification', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/demo/');
+    await page.waitForFunction(() => {
+      const w = (window as unknown as { __witEngine: { getContextMenuManager: () => unknown } })
+        .__witEngine;
+      return w && w.getContextMenuManager();
+    });
+  });
+
+  function getScrollContainer(page: import('@playwright/test').Page) {
+    return page.locator('[tabindex="0"]').first();
+  }
+
+  async function getCellCoords(
+    page: import('@playwright/test').Page,
+    row: number,
+    col: number,
+  ): Promise<{ x: number; y: number }> {
+    return page.evaluate(({ row, col }: { row: number; col: number }) => {
+      const engine = (window as any).__witEngine;
+      const layout = engine.getLayoutEngine();
+      const scrollMgr = engine.getScrollManager();
+      const frozenRows = engine.getConfig().frozenRows ?? 0;
+      const frozenCols = engine.getConfig().frozenColumns ?? 0;
+
+      let x = layout.rowNumberWidth;
+      for (let i = 0; i < col; i++) x += layout.getColumnWidth(i);
+      x += layout.getColumnWidth(col) / 2;
+
+      let y = layout.headerHeight;
+      for (let i = 0; i < row; i++) y += layout.getRowHeight(i);
+      y += layout.getRowHeight(row) / 2;
+
+      if (col >= frozenCols) x -= scrollMgr.scrollX;
+      if (row >= frozenRows) y -= scrollMgr.scrollY;
+
+      return { x, y };
+    }, { row, col });
+  }
+
+  test('1. Submenu chevron indicator renders', async ({ page }) => {
+    // Register an item with submenu
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      engine.registerContextMenuItem({
+        id: 'test-submenu-parent',
+        label: 'Submenu Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'sub-child-1', label: 'Sub Child 1', contexts: ['cell'], action: () => {} },
+          { id: 'sub-child-2', label: 'Sub Child 2', contexts: ['cell'], action: () => {} },
+        ],
+      });
+    });
+
+    const scrollContainer = getScrollContainer(page);
+    const box = await scrollContainer.boundingBox();
+    expect(box).not.toBeNull();
+
+    const coords = await getCellCoords(page, 1, 1);
+    await page.mouse.click(box!.x + coords.x, box!.y + coords.y, { button: 'right' });
+    await page.waitForTimeout(200);
+
+    // Verify chevron exists on the submenu parent item
+    const hasChevron = await page.evaluate(() => {
+      const menus = document.querySelectorAll('[data-menu-depth]');
+      for (const menu of menus) {
+        const items = menu.querySelectorAll('[data-index]');
+        for (const item of items) {
+          if (item.textContent?.includes('Submenu Parent') && item.querySelector('[data-chevron]')) {
+            return true;
+          }
+        }
+      }
+      return false;
+    });
+
+    expect(hasChevron).toBe(true);
+
+    // Clean up
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      engine.unregisterContextMenuItem('test-submenu-parent');
+    });
+  });
+
+  test('2. Submenu opens on hover', async ({ page }) => {
+    // Register submenu item
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      engine.registerContextMenuItem({
+        id: 'test-hover-parent',
+        label: 'Hover Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'hover-child', label: 'Hover Child', contexts: ['cell'], action: () => {} },
+        ],
+      });
+    });
+
+    const scrollContainer = getScrollContainer(page);
+    const box = await scrollContainer.boundingBox();
+    expect(box).not.toBeNull();
+
+    const coords = await getCellCoords(page, 1, 1);
+    await page.mouse.click(box!.x + coords.x, box!.y + coords.y, { button: 'right' });
+    await page.waitForTimeout(200);
+
+    // Find the submenu parent item and hover over it
+    const parentItemBox = await page.evaluate(() => {
+      const menus = document.querySelectorAll('[style*="z-index: 100"]');
+      for (const menu of menus) {
+        const items = menu.querySelectorAll('[data-index]');
+        for (const item of items) {
+          if (item.textContent?.includes('Hover Parent')) {
+            const rect = item.getBoundingClientRect();
+            return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+          }
+        }
+      }
+      return null;
+    });
+
+    expect(parentItemBox).not.toBeNull();
+    await page.mouse.move(parentItemBox!.x, parentItemBox!.y);
+
+    // Wait for submenu delay (200ms) + buffer
+    await page.waitForTimeout(350);
+
+    // Check submenu panel appeared
+    const submenuCount = await page.evaluate(() => {
+      return document.querySelectorAll('[data-menu-depth]').length;
+    });
+
+    expect(submenuCount).toBe(2); // root + submenu
+
+    // Verify submenu contains child item
+    const submenuText = await page.evaluate(() => {
+      const panels = document.querySelectorAll('[data-menu-depth="1"]');
+      return panels[0]?.textContent ?? '';
+    });
+    expect(submenuText).toContain('Hover Child');
+
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      engine.unregisterContextMenuItem('test-hover-parent');
+    });
+  });
+
+  test('3. Submenu keyboard navigation (ArrowRight/Left/Up/Down)', async ({ page }) => {
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      engine.registerContextMenuItem({
+        id: 'test-kb-parent',
+        label: 'KB Parent',
+        contexts: ['cell'],
+        submenu: [
+          { id: 'kb-child-1', label: 'KB Child 1', contexts: ['cell'], action: () => {
+            (window as any).__kbChildClicked = true;
+          }},
+          { id: 'kb-child-2', label: 'KB Child 2', contexts: ['cell'], action: () => {} },
+        ],
+      });
+    });
+
+    const scrollContainer = getScrollContainer(page);
+    const box = await scrollContainer.boundingBox();
+    const coords = await getCellCoords(page, 1, 1);
+    await page.mouse.click(box!.x + coords.x, box!.y + coords.y, { button: 'right' });
+    await page.waitForTimeout(200);
+
+    // Navigate to the submenu parent using ArrowDown repeatedly
+    // First get count of items before the KB Parent
+    const parentIndex = await page.evaluate(() => {
+      const menu = document.querySelector('[data-menu-depth="0"]');
+      if (!menu) return -1;
+      const items = menu.querySelectorAll('[data-index]');
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].textContent?.includes('KB Parent')) return i;
+      }
+      return -1;
+    });
+    expect(parentIndex).toBeGreaterThanOrEqual(0);
+
+    // Press ArrowDown to reach the parent item
+    for (let i = 0; i <= parentIndex; i++) {
+      await page.keyboard.press('ArrowDown');
+    }
+
+    // ArrowRight should open submenu
+    await page.keyboard.press('ArrowRight');
+    await page.waitForTimeout(100);
+
+    let submenuCount = await page.evaluate(() => document.querySelectorAll('[data-menu-depth]').length);
+    expect(submenuCount).toBe(2);
+
+    // ArrowDown in submenu should navigate
+    await page.keyboard.press('ArrowDown');
+    await page.waitForTimeout(50);
+
+    // ArrowLeft should close submenu
+    await page.keyboard.press('ArrowLeft');
+    await page.waitForTimeout(100);
+
+    submenuCount = await page.evaluate(() => document.querySelectorAll('[data-menu-depth]').length);
+    expect(submenuCount).toBe(1); // Only root remains
+
+    // Re-open and select with Enter
+    await page.keyboard.press('ArrowRight');
+    await page.waitForTimeout(100);
+    await page.keyboard.press('Enter');
+    await page.waitForTimeout(100);
+
+    const clicked = await page.evaluate(() => (window as any).__kbChildClicked === true);
+    expect(clicked).toBe(true);
+
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      engine.unregisterContextMenuItem('test-kb-parent');
+    });
+  });
+
+  test('4. Empty menu prevention — suppresses when all items invisible', async ({ page }) => {
+    // Register ONLY one item that is always invisible
+    await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      // Remove all default items first
+      const items = engine.getContextMenuManager().getItems();
+      const ids = Array.from(items.keys()) as string[];
+      for (const id of ids) engine.unregisterContextMenuItem(id);
+
+      // Register only invisible item
+      engine.registerContextMenuItem({
+        id: 'invisible-item',
+        label: 'Invisible',
+        contexts: ['cell'],
+        action: () => {},
+        isVisible: () => false,
+      });
+    });
+
+    const scrollContainer = getScrollContainer(page);
+    const box = await scrollContainer.boundingBox();
+    const coords = await getCellCoords(page, 1, 1);
+    await page.mouse.click(box!.x + coords.x, box!.y + coords.y, { button: 'right' });
+    await page.waitForTimeout(200);
+
+    // Menu should NOT be open
+    const isOpen = await page.evaluate(() => {
+      const engine = (window as any).__witEngine;
+      return engine.getContextMenuManager()?.isOpen ?? false;
+    });
+    expect(isOpen).toBe(false);
+
+    // No menu panels in DOM
+    const panelCount = await page.evaluate(() => document.querySelectorAll('[data-menu-depth]').length);
+    expect(panelCount).toBe(0);
+  });
+});
diff --git a/tests/e2e/date-picker-screenshots.test.ts b/tests/e2e/date-picker-screenshots.test.ts
new file mode 100644
index 0000000..a7ad808
--- /dev/null
+++ b/tests/e2e/date-picker-screenshots.test.ts
@@ -0,0 +1,95 @@
+import { test } from '@playwright/test';
+import path from 'path';
+
+const WIDGET_BUNDLE = path.resolve(
+  __dirname,
+  '../../packages/widget/dist/witqq-spreadsheet-widget.umd.cjs',
+);
+
+const SCREENSHOT_DIR = path.resolve(
+  __dirname,
+  '../../moira-ws/planeta-migration-gaps-20260306-0231/step-7/iteration-1/screenshots',
+);
+
+async function setupGrid(page: import('@playwright/test').Page) {
+  await page.setContent(`
+    <html>
+      <head>
+        <style>
+          body { margin: 0; background: #fff; }
+          #grid { width: 700px; height: 400px; margin: 12px; }
+        </style>
+      </head>
+      <body>
+        <div id="grid"></div>
+      </body>
+    </html>
+  `);
+  await page.addScriptTag({ path: WIDGET_BUNDLE });
+  await page.evaluate(() => {
+    const S = (window as unknown as { Spreadsheet: { create: Function } }).Spreadsheet;
+    S.create('#grid', {
+      columns: [
+        { key: 'name', title: 'Name', width: 200 },
+        { key: 'date', title: 'Date', width: 150, type: 'date' as const },
+        { key: 'value', title: 'Value', width: 100, type: 'number' as const },
+      ],
+      data: [
+        { name: 'Item A', date: '2025-03-15', value: 100 },
+        { name: 'Item B', date: '2025-06-20', value: 200 },
+        { name: 'Item C', date: null, value: 300 },
+      ],
+      rowCount: 3,
+      editable: true,
+    });
+  });
+  await page.waitForTimeout(200);
+}
+
+test.describe('Date picker screenshots', () => {
+  test('capture all date picker states', async ({ page }) => {
+    await setupGrid(page);
+    const box = await page.locator('#grid').boundingBox();
+    const dateX = box!.x + 50 + 200 + 75;
+    const dateY = box!.y + 28 + 14;
+
+    // 1. Grid before interaction
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, '01-grid-initial.png') });
+
+    // 2. Date picker open
+    await page.mouse.dblclick(dateX, dateY);
+    await page.waitForTimeout(200);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, '02-picker-open.png') });
+
+    // 3. Close and reopen on empty date cell (row 3)
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(100);
+    const emptyDateY = box!.y + 28 + 28 * 2 + 14;
+    await page.mouse.dblclick(dateX, emptyDateY);
+    await page.waitForTimeout(200);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, '03-picker-empty-cell.png') });
+
+    // 4. Navigate to next month
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(100);
+    await page.mouse.dblclick(dateX, dateY);
+    await page.waitForTimeout(200);
+    const nextBtn = page.locator('[role="dialog"] button:has-text("▶")');
+    await nextBtn.click();
+    await page.waitForTimeout(100);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, '04-picker-next-month.png') });
+
+    // 5. Select a date (click day 10)
+    const day10 = page.locator('[role="dialog"] [data-day="10"]');
+    await day10.click();
+    await page.waitForTimeout(100);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, '05-after-selection.png') });
+
+    // 6. Non-date cell editing (textarea)
+    const nameX = box!.x + 50 + 100;
+    const nameY = box!.y + 28 + 14;
+    await page.mouse.dblclick(nameX, nameY);
+    await page.waitForTimeout(200);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, '06-text-editor.png') });
+  });
+});
diff --git a/tests/e2e/date-picker-verification.test.ts b/tests/e2e/date-picker-verification.test.ts
new file mode 100644
index 0000000..928f580
--- /dev/null
+++ b/tests/e2e/date-picker-verification.test.ts
@@ -0,0 +1,154 @@
+import { test, expect } from '@playwright/test';
+import path from 'path';
+
+/**
+ * Browser verification for all 5 expected date picker functions.
+ */
+
+const WIDGET_BUNDLE = path.resolve(
+  __dirname,
+  '../../packages/widget/dist/witqq-spreadsheet-widget.umd.cjs',
+);
+
+async function setupGrid(page: import('@playwright/test').Page) {
+  await page.setContent(`
+    <html>
+      <head>
+        <style>
+          body { margin: 0; }
+          #grid { width: 700px; height: 400px; margin: 12px; }
+        </style>
+      </head>
+      <body>
+        <div id="grid"></div>
+      </body>
+    </html>
+  `);
+
+  await page.addScriptTag({ path: WIDGET_BUNDLE });
+
+  await page.evaluate(() => {
+    const S = (
+      window as unknown as {
+        Spreadsheet: { create: Function };
+      }
+    ).Spreadsheet;
+
+    S.create('#grid', {
+      columns: [
+        { key: 'name', title: 'Name', width: 200 },
+        { key: 'date', title: 'Date', width: 150, type: 'date' as const },
+        { key: 'value', title: 'Value', width: 100, type: 'number' as const },
+      ],
+      data: [
+        { name: 'Item A', date: '2025-03-15', value: 100 },
+        { name: 'Item B', date: '2025-06-20', value: 200 },
+        { name: 'Item C', date: null, value: 300 },
+      ],
+      rowCount: 3,
+      editable: true,
+    });
+  });
+
+  await page.waitForTimeout(200);
+}
+
+function getDateCellCoords(box: { x: number; y: number }) {
+  // Row number width (~50) + name col (200) + offset into date col
+  return {
+    x: box.x + 50 + 200 + 75,
+    y: box.y + 28 + 14, // header + half row
+  };
+}
+
+test.describe('Date picker browser verification', () => {
+  test('Function 1: Date picker opens on double-click', async ({ page }) => {
+    await setupGrid(page);
+    const box = await page.locator('#grid').boundingBox();
+    const { x, y } = getDateCellCoords(box!);
+
+    await page.mouse.dblclick(x, y);
+    await page.waitForTimeout(100);
+
+    const picker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(picker).toBeVisible();
+    await expect(picker).toContainText('March');
+    await expect(picker).toContainText('2025');
+  });
+
+  test('Function 2: Date selection via click commits and closes', async ({ page }) => {
+    await setupGrid(page);
+    const box = await page.locator('#grid').boundingBox();
+    const { x, y } = getDateCellCoords(box!);
+
+    await page.mouse.dblclick(x, y);
+    await page.waitForTimeout(100);
+
+    const picker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(picker).toBeVisible();
+
+    // Click day 20
+    await picker.locator('[data-day="20"]').click();
+    await page.waitForTimeout(100);
+
+    // Picker should close
+    await expect(picker).not.toBeVisible();
+  });
+
+  test('Function 3: Keyboard navigation and Escape closes', async ({ page }) => {
+    await setupGrid(page);
+    const box = await page.locator('#grid').boundingBox();
+    const { x, y } = getDateCellCoords(box!);
+
+    await page.mouse.dblclick(x, y);
+    await page.waitForTimeout(100);
+
+    const picker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(picker).toBeVisible();
+
+    // Press Escape
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(100);
+
+    await expect(picker).not.toBeVisible();
+  });
+
+  test('Function 4: Grid scroll closes date picker', async ({ page }) => {
+    await setupGrid(page);
+    const box = await page.locator('#grid').boundingBox();
+    const { x, y } = getDateCellCoords(box!);
+
+    await page.mouse.dblclick(x, y);
+    await page.waitForTimeout(100);
+
+    const picker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(picker).toBeVisible();
+
+    // Scroll the grid — click on grid area first to focus, then scroll
+    await page.mouse.click(box!.x + 100, box!.y + 200);
+    await page.waitForTimeout(50);
+
+    // Check if picker closed after click (grid mousedown closes it)
+    await expect(picker).not.toBeVisible();
+  });
+
+  test('Function 5: Non-date cell editing still opens textarea', async ({ page }) => {
+    await setupGrid(page);
+    const box = await page.locator('#grid').boundingBox();
+
+    // Click on name column (non-date) — row number (~50) + offset into name col
+    const nameX = box!.x + 50 + 100;
+    const nameY = box!.y + 28 + 14;
+
+    await page.mouse.dblclick(nameX, nameY);
+    await page.waitForTimeout(100);
+
+    // Should NOT show date picker
+    const picker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(picker).not.toBeVisible();
+
+    // Should show textarea (inline editor)
+    const textarea = page.locator('#grid textarea');
+    await expect(textarea).toBeVisible();
+  });
+});
diff --git a/tests/e2e/date-picker.test.ts b/tests/e2e/date-picker.test.ts
new file mode 100644
index 0000000..190b278
--- /dev/null
+++ b/tests/e2e/date-picker.test.ts
@@ -0,0 +1,157 @@
+import { test, expect } from '@playwright/test';
+import path from 'path';
+
+/**
+ * E2E test for date picker overlay interaction.
+ *
+ * Creates a spreadsheet with a date column, triggers editing,
+ * verifies the date picker appears and date selection works.
+ */
+
+const WIDGET_BUNDLE = path.resolve(
+  __dirname,
+  '../../packages/widget/dist/witqq-spreadsheet-widget.umd.cjs',
+);
+
+test.describe('Date picker overlay', () => {
+  test('opens date picker on double-click and selects date', async ({ page }) => {
+    await page.setContent(`
+      <html>
+        <head>
+          <style>
+            body { margin: 0; background: #f5f5f5; font-family: sans-serif; }
+            #grid { width: 700px; height: 400px; margin: 12px; }
+          </style>
+        </head>
+        <body>
+          <div id="grid"></div>
+        </body>
+      </html>
+    `);
+
+    await page.addScriptTag({ path: WIDGET_BUNDLE });
+
+    // Create spreadsheet with date column
+    await page.evaluate(() => {
+      const S = (
+        window as unknown as {
+          Spreadsheet: { create: Function };
+        }
+      ).Spreadsheet;
+
+      S.create('#grid', {
+        columns: [
+          { key: 'name', title: 'Name', width: 200 },
+          { key: 'date', title: 'Date', width: 150, type: 'date' as const },
+          { key: 'value', title: 'Value', width: 100, type: 'number' as const },
+        ],
+        data: [
+          { name: 'Item A', date: '2025-03-15', value: 100 },
+          { name: 'Item B', date: '2025-06-20', value: 200 },
+          { name: 'Item C', date: null, value: 300 },
+        ],
+        rowCount: 3,
+        editable: true,
+      });
+    });
+
+    // Wait for render
+    await page.waitForTimeout(200);
+
+    // Double-click the date cell (row 0, col 1)
+    // The date column starts after the row number column + name column
+    // Need to click on the actual cell area
+    const gridEl = page.locator('#grid');
+    const box = await gridEl.boundingBox();
+    expect(box).not.toBeNull();
+
+    // Row number width (default ~50) + name col (200) + some offset into date col
+    // Header height is ~28, first data row starts at ~28
+    const dateColX = box!.x + 50 + 200 + 75; // middle of date column
+    const firstRowY = box!.y + 28 + 14; // middle of first data row
+
+    await page.mouse.dblclick(dateColX, firstRowY);
+    await page.waitForTimeout(100);
+
+    // Date picker should appear
+    const datePicker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(datePicker).toBeVisible();
+
+    // Should show March 2025
+    await expect(datePicker).toContainText('March');
+    await expect(datePicker).toContainText('2025');
+
+    // Take screenshot with date picker open
+    await page.screenshot({
+      path: 'moira-ws/planeta-migration-gaps-20260306-0231/step-7/date-picker-open.png',
+    });
+
+    // Click on day 20
+    const day20 = datePicker.locator('[data-day="20"]');
+    await day20.click();
+    await page.waitForTimeout(100);
+
+    // Date picker should close
+    await expect(datePicker).not.toBeVisible();
+
+    // Take screenshot after selection
+    await page.screenshot({
+      path: 'moira-ws/planeta-migration-gaps-20260306-0231/step-7/date-picker-after-select.png',
+    });
+  });
+
+  test('keyboard navigation works in date picker', async ({ page }) => {
+    await page.setContent(`
+      <html>
+        <head>
+          <style>
+            body { margin: 0; }
+            #grid { width: 700px; height: 400px; margin: 12px; }
+          </style>
+        </head>
+        <body>
+          <div id="grid"></div>
+        </body>
+      </html>
+    `);
+
+    await page.addScriptTag({ path: WIDGET_BUNDLE });
+
+    await page.evaluate(() => {
+      const S = (
+        window as unknown as {
+          Spreadsheet: { create: Function };
+        }
+      ).Spreadsheet;
+
+      S.create('#grid', {
+        columns: [
+          { key: 'name', title: 'Name', width: 200 },
+          { key: 'date', title: 'Date', width: 150, type: 'date' as const },
+        ],
+        data: [{ name: 'Test', date: '2025-01-10' }],
+        rowCount: 1,
+        editable: true,
+      });
+    });
+
+    await page.waitForTimeout(200);
+
+    const gridEl = page.locator('#grid');
+    const box = await gridEl.boundingBox();
+    const dateColX = box!.x + 50 + 200 + 75;
+    const firstRowY = box!.y + 28 + 14;
+
+    // Double-click to open
+    await page.mouse.dblclick(dateColX, firstRowY);
+    await page.waitForTimeout(100);
+
+    const datePicker = page.locator('[role="dialog"][aria-label="Date picker"]');
+    await expect(datePicker).toBeVisible();
+
+    // Escape closes without commit
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(100);
+    await expect(datePicker).not.toBeVisible();
+  });
+});
diff --git a/tests/e2e/date-time-verification.test.ts b/tests/e2e/date-time-verification.test.ts
new file mode 100644
index 0000000..8244901
--- /dev/null
+++ b/tests/e2e/date-time-verification.test.ts
@@ -0,0 +1,157 @@
+import { test, expect } from '@playwright/test';
+import path from 'path';
+
+const WIDGET_BUNDLE = path.resolve(
+  __dirname,
+  '../../packages/widget/dist/witqq-spreadsheet-widget.umd.cjs',
+);
+
+async function setupGrid(page: import('@playwright/test').Page) {
+  await page.setContent(`
+    <html>
+      <head>
+        <style>
+          body { margin: 0; }
+          #grid { width: 700px; height: 400px; margin: 12px; }
+        </style>
+      </head>
+      <body>
+        <div id="grid"></div>
+      </body>
+    </html>
+  `);
+
+  await page.addScriptTag({ path: WIDGET_BUNDLE });
+
+  await page.evaluate(() => {
+    const S = (
+      window as unknown as {
+        Spreadsheet: { create: Function };
+      }
+    ).Spreadsheet;
+
+    S.create('#grid', {
+      columns: [
+        { key: 'name', title: 'Name', width: 200 },
+        { key: 'ts', title: 'Timestamp', width: 180, type: 'datetime' as const },
+        { key: 'value', title: 'Value', width: 100, type: 'number' as const },
+      ],
+      data: [
+        { name: 'Item A', ts: '2025-03-15T14:30', value: 100 },
+        { name: 'Item B', ts: '2025-06-20T09:15', value: 200 },
+        { name: 'Item C', ts: null, value: 300 },
+      ],
+      rowCount: 3,
+      editable: true,
+    });
+  });
+
+  await page.waitForTimeout(200);
+}
+
+function getDateTimeCellCoords(box: { x: number; y: number }) {
+  // Row number width (~50) + name col (200) + offset into datetime col
+  return {
+    x: box.x + 50 + 200 + 90,
+    y: box.y + 28 + 14,
+  };
+}
+
+test.describe('DateTime picker browser verification', () => {
+  test('Function 1: DateTime picker opens on double-click', async ({ page }) => {
+    await setupGrid(page);
+    const canvas = page.locator('canvas').first();
+    const box = (await canvas.boundingBox())!;
+    const cell = getDateTimeCellCoords(box);
+
+    await page.mouse.dblclick(cell.x, cell.y);
+    await page.waitForTimeout(300);
+
+    const dialog = page.locator('[role="dialog"]');
+    await expect(dialog).toBeVisible();
+
+    const ariaLabel = await dialog.getAttribute('aria-label');
+    expect(ariaLabel).toBe('Date and time picker');
+
+    // Should have two time inputs (hour + minute)
+    const inputs = dialog.locator('input[type="text"]');
+    await expect(inputs).toHaveCount(2);
+
+    // Should have OK button
+    const okBtn = dialog.locator('button:has-text("OK")');
+    await expect(okBtn).toBeVisible();
+  });
+
+  test('Function 2: DateTime picker commits ISO value via OK', async ({ page }) => {
+    await setupGrid(page);
+    const canvas = page.locator('canvas').first();
+    const box = (await canvas.boundingBox())!;
+    const cell = getDateTimeCellCoords(box);
+
+    await page.mouse.dblclick(cell.x, cell.y);
+    await page.waitForTimeout(300);
+
+    const dialog = page.locator('[role="dialog"]');
+    await expect(dialog).toBeVisible();
+
+    // Click OK to commit current value
+    const okBtn = dialog.locator('button:has-text("OK")');
+    await okBtn.click();
+    await page.waitForTimeout(200);
+
+    // Dialog should close
+    await expect(dialog).not.toBeVisible();
+
+    // Re-open the picker to verify value was committed
+    await page.mouse.dblclick(cell.x, cell.y);
+    await page.waitForTimeout(300);
+    const dialog2 = page.locator('[role="dialog"]');
+    await expect(dialog2).toBeVisible();
+
+    // Verify hour and minute inputs still display values (confirms ISO format committed)
+    const hourInput = dialog2.locator('input[type="text"]').first();
+    const minuteInput = dialog2.locator('input[type="text"]').nth(1);
+    const hourVal = await hourInput.inputValue();
+    const minVal = await minuteInput.inputValue();
+    expect(hourVal).toMatch(/^\d{1,2}$/);
+    expect(minVal).toMatch(/^\d{1,2}$/);
+  });
+
+  test('Function 3: Escape closes without committing', async ({ page }) => {
+    await setupGrid(page);
+    const canvas = page.locator('canvas').first();
+    const box = (await canvas.boundingBox())!;
+    const cell = getDateTimeCellCoords(box);
+
+    await page.mouse.dblclick(cell.x, cell.y);
+    await page.waitForTimeout(300);
+
+    const dialog = page.locator('[role="dialog"]');
+    await expect(dialog).toBeVisible();
+
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(200);
+
+    await expect(dialog).not.toBeVisible();
+  });
+
+  test('Function 4: Now button updates to current datetime', async ({ page }) => {
+    await setupGrid(page);
+    const canvas = page.locator('canvas').first();
+    const box = (await canvas.boundingBox())!;
+    const cell = getDateTimeCellCoords(box);
+
+    await page.mouse.dblclick(cell.x, cell.y);
+    await page.waitForTimeout(300);
+
+    const dialog = page.locator('[role="dialog"]');
+    await expect(dialog).toBeVisible();
+
+    const nowBtn = dialog.locator('button:has-text("Now")');
+    await nowBtn.click();
+    await page.waitForTimeout(200);
+
+    // Dialog should still be open after Now (it only updates, doesn't commit)
+    await expect(dialog).toBeVisible();
+  });
+});
diff --git a/tests/e2e/word-wrap.test.ts b/tests/e2e/word-wrap.test.ts
new file mode 100644
index 0000000..2cefca6
--- /dev/null
+++ b/tests/e2e/word-wrap.test.ts
@@ -0,0 +1,145 @@
+import { test, expect } from '@playwright/test';
+import path from 'path';
+
+/**
+ * Visual E2E test for word-wrap rendering in cells.
+ *
+ * Uses the widget UMD bundle directly (no Docker/dev server needed).
+ * Creates a spreadsheet with wrapText columns and long text,
+ * then captures a screenshot showing multi-line wrapped text.
+ */
+
+const WIDGET_BUNDLE = path.resolve(
+  __dirname,
+  '../../packages/widget/dist/witqq-spreadsheet-widget.umd.cjs',
+);
+
+test.describe('Word-wrap rendering', () => {
+  test('renders multi-line wrapped text in cells', async ({ page }) => {
+    await page.setContent(`
+      <html>
+        <head>
+          <style>
+            body { margin: 0; background: #f5f5f5; font-family: sans-serif; }
+            h2 { margin: 12px; font-size: 14px; color: #333; }
+            #grid { width: 900px; height: 500px; margin: 0 12px; }
+          </style>
+        </head>
+        <body>
+          <h2>Word-Wrap Demo — wrapText: true on "Description" and "Notes" columns</h2>
+          <div id="grid"></div>
+        </body>
+      </html>
+    `);
+
+    await page.addScriptTag({ path: WIDGET_BUNDLE });
+
+    await page.evaluate(() => {
+      const S = (
+        window as unknown as {
+          Spreadsheet: { create: Function; lightTheme: Record<string, unknown> };
+        }
+      ).Spreadsheet;
+
+      // Clone lightTheme with taller rows so wrapped text is visible
+      const baseTheme = S.lightTheme as { dimensions: Record<string, number> };
+      const tallRowTheme = {
+        ...baseTheme,
+        dimensions: { ...baseTheme.dimensions, rowHeight: 72 },
+      };
+
+      S.create('#grid', {
+        columns: [
+          { key: 'id', title: 'ID', width: 50, type: 'number' as const },
+          { key: 'name', title: 'Name', width: 120 },
+          {
+            key: 'description',
+            title: 'Description (wrap)',
+            width: 220,
+            wrapText: true,
+          },
+          { key: 'status', title: 'Status', width: 80 },
+          {
+            key: 'notes',
+            title: 'Notes (wrap)',
+            width: 250,
+            wrapText: true,
+          },
+        ],
+        data: [
+          {
+            id: 1,
+            name: 'Alpha Release',
+            description:
+              'Initial alpha release with core spreadsheet engine, canvas rendering, and basic editing capabilities.',
+            status: 'Done',
+            notes:
+              'Performance benchmarks show 60fps scrolling with 1M rows. Memory usage under 200MB.',
+          },
+          {
+            id: 2,
+            name: 'Beta',
+            description:
+              'Beta release adding frozen panes, column resize, sorting, and clipboard support.',
+            status: 'In Progress',
+            notes:
+              'Frozen panes tested on Chrome, Firefox, Safari. Edge cases with merged cells still need work.',
+          },
+          {
+            id: 3,
+            name: 'Word Wrap',
+            description:
+              'Text measurement extensions and word-wrap rendering. Supports word-boundary splitting with character-level fallback for very long words.',
+            status: 'Testing',
+            notes:
+              'This row demonstrates the word-wrap feature.\nExplicit newlines are preserved.\nEach line wraps independently when it exceeds the column width.',
+          },
+          {
+            id: 4,
+            name: 'Short',
+            description: 'Short text',
+            status: 'Planned',
+            notes: 'Brief note',
+          },
+          {
+            id: 5,
+            name: 'Long Word',
+            description:
+              'Superlongwordthatcannotbesplitbywordboundarysoitmustfallbacktocharacterlevelbreaking here.',
+            status: 'Edge case',
+            notes:
+              'Character-level fallback ensures even very long unbreakable words are displayed correctly.',
+          },
+        ],
+        theme: tallRowTheme,
+        showRowNumbers: true,
+      });
+    });
+
+    // Wait for canvas to render
+    const canvas = page.locator('canvas').first();
+    await expect(canvas).toBeVisible();
+
+    // Small delay for text rendering to complete
+    await page.waitForTimeout(500);
+
+    // Capture screenshot
+    const screenshotPath = path.resolve(
+      __dirname,
+      '../../moira-ws/planeta-migration-gaps-20260306-0231/step-2/iteration-2/word-wrap-screenshot.png',
+    );
+    await page.screenshot({ path: screenshotPath, fullPage: true });
+
+    // Verify canvas has non-blank content
+    const isNonBlank = await canvas.evaluate((el: HTMLCanvasElement) => {
+      const ctx = el.getContext('2d');
+      if (!ctx) return false;
+      const data = ctx.getImageData(0, 0, el.width, el.height).data;
+      for (let i = 0; i < data.length; i += 4) {
+        if (data[i] !== 255 || data[i + 1] !== 255 || data[i + 2] !== 255) return true;
+      }
+      return false;
+    });
+    expect(isNonBlank).toBe(true);
+  });
+});