@svgrid/grid 3.0.4 → 3.0.6

package/src/editing.ts

@@ -47,6 +47,14 @@ export function createEditing<
   function isCellEditable(column: Column<TData>, row?: Row<TData>): boolean {
     const editable = column.columnDef.editable;
     if (editable === false) return false;
+    if (row) {
+      // A server-side group row is a key with aggregates under the leaf
+      // columns, and a placeholder row has no data yet: neither takes an
+      // edit, whatever the column says.
+      const serverGroup = ctx.props.serverGroup;
+      if (serverGroup && row.original !== undefined && serverGroup.isGroup(row.original)) return false;
+      if (ctx.placeholderStateOf?.(row)) return false;
+    }
     if (typeof editable !== "function") return true;
     if (!row) return true;
     const cellCtx: CellContext<TData> = {
@@ -150,6 +158,24 @@ export function createEditing<
     runHistoryGroup(ctx, () => commitEditingCell());
   }
 
+  /**
+   * True when a column with `rejectInvalid` refuses `value`: its `validate`
+   * hook returns `false` or a message. Without the flag nothing is refused.
+   */
+  function editRejected(column: any, value: unknown, rowData: unknown): boolean {
+    const def = column?.columnDef as
+      | { rejectInvalid?: boolean; validate?: (p: unknown) => string | boolean | null | undefined }
+      | undefined;
+    if (!def?.rejectInvalid || typeof def.validate !== "function") return false;
+    const verdict = def.validate({
+      value,
+      row: rowData,
+      rowIndex: ctx.internalData.indexOf(rowData as TData),
+      column,
+    });
+    return verdict === false || (typeof verdict === "string" && verdict.length > 0);
+  }
+
   function commitEditingCell() {
     if (!ctx.editingCell) return;
     const editing = ctx.editingCell;
@@ -192,6 +218,12 @@ export function createEditing<
           columnId: ctx.editingCell.columnId,
         });
       }
+      // A refused edit closes the editor and leaves the row, the overlay,
+      // the history and the consumer untouched.
+      if (editRejected(column, finalValue, rowData)) {
+        ctx.editingCell = null;
+        return;
+      }
       rowData[column.columnDef.field] = finalValue;
     }
     const key = getCellKey(ctx.editingCell.rowId, ctx.editingCell.columnId);
@@ -770,6 +802,7 @@ export function createEditing<
             columnId: column.id,
           })
         : parsed;
+      if (editRejected(column, finalValue, row.original)) continue;
       if (oldValue !== finalValue) {
         (row.original as Record<string, unknown>)[field] = finalValue;
         const key = getCellKey(fr.rowId, column.id);

package/src/gantt-stub.test.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * A stand-in for @svgrid/enterprise's SvGridGantt, for `svgrid.gantt-seam.test.ts`.
+   *
+   * The seam's contract is which props the grid hands the renderer, so this
+   * writes each of them into the DOM where a test can read them back. It is
+   * named `.test.svelte` so `tools/strip-dist-tests.mjs` keeps it out of the
+   * published tarball, and the grid's vitest only collects `*.test.ts`, so it
+   * is never mistaken for a suite of its own.
+   */
+  import type { ColumnDef, GanttConfig, RowData, TableFeatures } from './index'
+
+  let {
+    data = [],
+    columns = [],
+    gantt,
+    getRowId,
+  }: {
+    data: ReadonlyArray<RowData>
+    columns: Array<ColumnDef<TableFeatures, any>>
+    gantt: GanttConfig<TableFeatures, any>
+    getRowId?: (row: any, index: number) => string
+  } = $props()
+
+  const ids = $derived(
+    data.map((r, i) => (getRowId ? getRowId(r, i) : String(i))).join(','),
+  )
+</script>
+
+<div
+  class="gantt-stub"
+  data-ids={ids}
+  data-rows={data.length}
+  data-cols={columns.length}
+  data-start={gantt?.startField ?? ''}
+  data-parent={gantt?.parentField ?? ''}
+  data-has-get-row-id={typeof getRowId === 'function'}
+></div>

package/src/gantt-view.svelte.ts

@@ -0,0 +1,35 @@
+/**
+ * gantt-view registry - the injection seam for the *Gantt view of the grid*.
+ * Setting the `gantt` prop on `<SvGrid>` switches the table for a task table
+ * beside a time chart (bars by start / end, a work-breakdown tree, dependency
+ * arrows), but the renderer itself ships in `@svgrid/enterprise` (a paid
+ * feature). This tiny reactive holder lets enterprise register that renderer at
+ * import time; the grid looks it up and mounts it, or shows an upsell
+ * placeholder when it is absent. Mirrors the `scheduler-view` / `board-view`
+ * pattern.
+ *
+ * ```ts
+ * // in @svgrid/enterprise, at module load:
+ * import { registerGanttView } from '@svgrid/grid'
+ * import SvGridGantt from './gantt/SvGridGantt.svelte'
+ * registerGanttView(SvGridGantt)
+ * ```
+ */
+import type { Component } from 'svelte'
+
+let renderer = $state<Component<any> | null>(null)
+
+/** Register the component that renders `gantt` mode. Enterprise calls this. */
+export function registerGanttView(component: Component<any>): void {
+  renderer = component
+}
+
+/** The registered Gantt renderer, or null when enterprise is not installed. */
+export function getGanttView(): Component<any> | null {
+  return renderer
+}
+
+/** Whether a Gantt renderer has been registered. */
+export function hasGanttView(): boolean {
+  return renderer != null
+}

package/src/grid-icons.ts

@@ -97,8 +97,8 @@ export type GridIcons = Partial<Record<GridIconName, Snippet>>
 
 /**
  * Icons whose built-in form is a character rather than an SVG path. Kept as
- * data so `<SvGrid>`, its footer and the standalone `SvRowGroupPanel` render
- * the same defaults instead of three copies drifting apart.
+ * data so `<SvGrid>`, its footer and the row-group panel in @svgrid/enterprise
+ * render the same defaults instead of three copies drifting apart.
  *
  * Each is the exact character that shipped inline before, so a grid that sets
  * no `icons` renders byte-for-byte what it always did.

package/src/grid-messages.test.ts

@@ -8,6 +8,13 @@ describe('resolveGridMessages', () => {
     expect(resolveGridMessages({})).toEqual(defaultGridMessages)
   })
 
+  it('names the client group expander, so a localized grid has no English left in it', () => {
+    const m = resolveGridMessages({ expandGroup: 'Gruppe aufklappen', rowsSuffix: 'Zeilen' })
+    expect(m.expandGroup).toBe('Gruppe aufklappen')
+    expect(m.collapseGroup).toBe('Collapse group')
+    expect(m.rowsSuffix).toBe('Zeilen')
+  })
+
   it('replaces only the provided keys, keeping English for the rest', () => {
     const m = resolveGridMessages({ noRows: 'Aucune ligne', pageSize: 'Taille :' })
     expect(m.noRows).toBe('Aucune ligne')

package/src/grid-messages.ts

@@ -106,9 +106,22 @@ export type GridChromeMessages = {
   bulkEditCancel: string
   bulkEditNoFields: string
   chartRange: string
+  // Rows whose data has not arrived (server-side / infinite loading)
+  rowLoadFailed: string
+  rowLoadRetry: string
+  // The expander on a client-side group row
+  expandGroup: string
+  collapseGroup: string
+  // The chevron of the detail-toggle column (`showDetailToggle`)
+  openDetail: string
+  closeDetail: string
   // Upsell notes (enterprise views not installed)
   pivotUpsellTitle: string
   pivotUpsellBody: string
+  ganttUpsellTitle: string
+  ganttUpsellBody: string
+  /** Placeholder in the Gantt view's search box. */
+  ganttSearchPlaceholder: string
   /** Shared licensing line under every Enterprise upsell note. */
   upsellLicense: string
   upsellLicenseLink: string
@@ -185,8 +198,17 @@ export const defaultGridMessages: GridChromeMessages = {
   opBefore: 'Before',
   opAfter: 'After',
   chartRange: 'Chart selected range',
+  rowLoadFailed: 'Could not load these rows.',
+  rowLoadRetry: 'Retry',
+  expandGroup: 'Expand group',
+  collapseGroup: 'Collapse group',
+  openDetail: 'Open details',
+  closeDetail: 'Close details',
   pivotUpsellTitle: 'Pivot mode',
   pivotUpsellBody: 'Pivot mode is an Enterprise feature. Install @svgrid/enterprise and call enablePivot() to use it.',
+  ganttUpsellTitle: 'Gantt view',
+  ganttUpsellBody: 'The Gantt view is an Enterprise feature. Install @svgrid/enterprise and call enableGanttView() to render it.',
+  ganttSearchPlaceholder: 'Search tasks...',
   upsellLicense:
     'A license key is required for production use. Without one the feature still works, but the grid renders an unlicensed watermark.',
   upsellLicenseLink: 'View licensing',

package/src/headless.ts

@@ -85,3 +85,27 @@ export {
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte'
 export { createGridState, createSvGridState } from './createGridState.svelte'
 export { subscribeGrid, subscribeSvGrid } from './subscribe'
+
+// The virtualizers are pure window arithmetic (scroll offset in, visible
+// range out) with no DOM of their own, and a custom renderer over 50k rows
+// needs one. They were only on the barrel, so the Headless demos imported
+// the barrel to reach them and paid for the whole thing.
+export { createVirtualizer } from './virtualization/virtualizer'
+export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte'
+export { createColumnVirtualizer } from './virtualization/column-virtualizer'
+export type { VirtualItem, VirtualizerOptions, VirtualizerState } from './virtualization/types'
+
+// The WAI-ARIA attribute factories: plain objects to spread onto your own
+// markup (`role`, `aria-sort`, `aria-rowindex`, ...). No DOM is touched here
+// either; a custom renderer that wants keyboard navigation reads
+// `activeCell` from the store and spreads these.
+export {
+  getGridCellDomId,
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+  type GridCellA11yInput,
+  type GridColumnA11yInput,
+  type GridSortDirection,
+} from './a11y'

package/src/history.test.ts

@@ -5,6 +5,8 @@ import {
   pushHistory,
   runHistoryGroup,
   nextGroupId,
+  peekUndoHistory,
+  peekRedoHistory,
   type HistoryStep,
 } from './history'
 
@@ -162,7 +164,7 @@ describe('runHistoryGroup', () => {
     // This is why the group id is ambient rather than stamped afterwards: the
     // cap drops entries from the front, so any index captured before the call
     // would point at the wrong steps by the end of it.
-    const { ctx } = makeCtx([step(0)], 3)
+    const { ctx } = makeCtx([step(0)], 1)
     runHistoryGroup(ctx, () => {
       pushHistory(ctx, [step(1)])
       pushHistory(ctx, [step(2)])
@@ -172,6 +174,21 @@ describe('runHistoryGroup', () => {
     expect(new Set(ctx.history.map((s) => s.groupId)).size).toBe(1)
   })
 
+  it('caps by actions, so a group larger than the buffer stays whole', () => {
+    // A sort of 5,000 rows is one Ctrl+Z of 20,000 steps; a cap that
+    // counted steps cut it to its tail and undid a fifth of it.
+    const { ctx } = makeCtx([step(0)], 2)
+    runHistoryGroup(ctx, () => { for (let i = 1; i <= 5; i += 1) pushHistory(ctx, [step(i)]) })
+    expect(ctx.history.map((s) => s.rowId)).toEqual(['r0', 'r1', 'r2', 'r3', 'r4', 'r5'])
+    pushHistory(ctx, [step(9)])
+    // Three actions now; the oldest one goes and the group survives whole.
+    expect(ctx.history.map((s) => s.rowId)).toEqual(['r1', 'r2', 'r3', 'r4', 'r5', 'r9'])
+    expect(ctx.historyPtr).toBe(5)
+    undoHistory(ctx)
+    undoHistory(ctx)
+    expect(ctx.historyPtr).toBe(-1)
+  })
+
   it('nests into the outer group so one action is one undo', () => {
     const { ctx } = makeCtx()
     runHistoryGroup(ctx, () => {
@@ -194,3 +211,34 @@ describe('runHistoryGroup', () => {
     expect(runHistoryGroup(ctx, () => 42)).toBe(42)
   })
 })
+
+describe('tags', () => {
+  it('stamps the ambient tag on every step recorded while it is set, grouped or not', () => {
+    const { ctx } = makeCtx()
+    const sheet = { name: 'Orders' }
+    pushHistory(ctx, [step(1)])
+    ;(ctx as { historyTag?: unknown }).historyTag = sheet
+    pushHistory(ctx, [step(2)])
+    runHistoryGroup(ctx, () => { pushHistory(ctx, [step(3)]); pushHistory(ctx, [step(4)]) })
+    ;(ctx as { historyTag?: unknown }).historyTag = undefined
+    pushHistory(ctx, [step(5)])
+    expect(ctx.history.map((s) => s.tag)).toEqual([undefined, sheet, sheet, sheet, undefined])
+    expect(ctx.history[2]!.groupId).toBe(ctx.history[3]!.groupId)
+  })
+
+  it('peeks at the step the next undo or redo would take', () => {
+    const { ctx } = makeCtx()
+    ;(ctx as { historyTag?: unknown }).historyTag = 'Summary'
+    pushHistory(ctx, [step(1)])
+    ;(ctx as { historyTag?: unknown }).historyTag = 'Orders'
+    runHistoryGroup(ctx, () => { pushHistory(ctx, [step(2)]); pushHistory(ctx, [step(3)]) })
+    expect(peekUndoHistory(ctx)).toEqual({ tag: 'Orders' })
+    expect(peekRedoHistory(ctx)).toBeNull()
+    undoHistory(ctx)
+    expect(peekUndoHistory(ctx)).toEqual({ tag: 'Summary' })
+    expect(peekRedoHistory(ctx)).toEqual({ tag: 'Orders' })
+    undoHistory(ctx)
+    expect(peekUndoHistory(ctx)).toBeNull()
+    expect(peekRedoHistory(ctx)).toEqual({ tag: 'Summary' })
+  })
+})

package/src/history.ts

@@ -36,6 +36,15 @@ export type HistoryStep = {
    * functions do the work. Never serialised, since a closure cannot be.
    */
   custom?: { undo: () => void; redo: () => void }
+  /**
+   * The consumer's own mark on the step, copied from `api.setHistoryTag` at
+   * the moment it is recorded. The grid never reads it: it is there for a
+   * consumer that shows one of several data sets through the grid and has
+   * to know which one a step belongs to before it lets Ctrl+Z apply it (a
+   * workbook with several sheets, say). Kept as given, so an object tag
+   * compares by identity. Not serialised.
+   */
+  tag?: unknown
 }
 
 /** Ctx surface these helpers touch. The controller satisfies it structurally. */
@@ -48,6 +57,8 @@ type HistoryCtx = {
    *  inside it joins that group, so a command does not have to thread a group
    *  id down through the writers it calls. */
   historyGroupId: string | undefined
+  /** Stamped on every step recorded while it is set; see `HistoryStep.tag`. */
+  historyTag?: unknown
   applyHistoryStep(step: HistoryStep, direction: 'undo' | 'redo'): void
 }
 
@@ -71,6 +82,37 @@ function groupEnd(history: ReadonlyArray<HistoryStep>, start: number): number {
   return i
 }
 
+/**
+ * The last `limit` ACTIONS of a history, whole groups kept. The cap used
+ * to count steps, and a sort of 5,000 rows is 20,000 steps in one group:
+ * it cut the group to its last 200 cells, so Ctrl+Z put a fifth of a
+ * column back and left the rest sorted. An action is one press of Ctrl+Z,
+ * so that is what the buffer counts; the steps inside are the cost of it.
+ */
+function lastActions(history: HistoryStep[], limit: number): HistoryStep[] {
+  let i = history.length
+  let actions = 0
+  while (i > 0 && actions < limit) {
+    i = groupStart(history, i - 1)
+    actions += 1
+  }
+  return i === 0 ? history : history.slice(i)
+}
+
+/** What the next undo would apply: the tag of the step Ctrl+Z takes next
+ *  (a group carries one tag, so its last step's is the group's). Null when
+ *  there is nothing to undo. */
+export function peekUndoHistory(ctx: HistoryCtx): { tag: unknown } | null {
+  const step = ctx.historyPtr >= 0 ? ctx.history[ctx.historyPtr] : undefined
+  return step ? { tag: step.tag } : null
+}
+
+/** The redo counterpart of `peekUndoHistory`. */
+export function peekRedoHistory(ctx: HistoryCtx): { tag: unknown } | null {
+  const step = ctx.historyPtr < ctx.history.length - 1 ? ctx.history[ctx.historyPtr + 1] : undefined
+  return step ? { tag: step.tag } : null
+}
+
 /** Undo one action. Returns false when there is nothing left to undo. */
 export function undoHistory(ctx: HistoryCtx): boolean {
   if (ctx.historyPtr < 0) return false
@@ -123,9 +165,13 @@ export function pushHistory(
   // Outside one, a group of one is just a step. Tagging it would make undo do
   // the same work through a slower path and would show up in serialized state.
   const id = ctx.historyGroupId ?? (groupId && steps.length > 1 ? groupId : undefined)
+  const tag = ctx.historyTag
   let next = ctx.history.slice(0, ctx.historyPtr + 1)
-  for (const step of steps) next.push(id ? { ...step, groupId: id } : step)
-  if (next.length > ctx.UNDO_LIMIT) next = next.slice(next.length - ctx.UNDO_LIMIT)
+  for (const step of steps) {
+    const stamped = tag === undefined ? step : { ...step, tag }
+    next.push(id ? { ...stamped, groupId: id } : stamped)
+  }
+  next = lastActions(next, ctx.UNDO_LIMIT)
   ctx.history = next
   ctx.historyPtr = ctx.history.length - 1
   ctx.historyVersion += 1

package/src/icon-seam.test.ts

@@ -20,18 +20,16 @@ const SRC = join(process.cwd(), 'src')
 const read = (f: string) => readFileSync(join(SRC, f), 'utf8')
 
 /** Files that render grid chrome and therefore must go through the seam. */
-const CHROME = ['SvGrid.svelte', 'GridMenus.svelte', 'GridFooter.svelte', 'SvRowGroupPanel.svelte']
+const CHROME = ['SvGrid.svelte', 'GridMenus.svelte', 'GridFooter.svelte']
 
 /**
  * Drop the regions allowed to contain raw icon markup: the `icon` snippet's own
- * body (which IS the built-in set), the `ic` snippet in SvRowGroupPanel, and
- * every `<script>` block.
+ * body (which IS the built-in set) and every `<script>` block.
  */
 function stripAllowedRegions(src: string): string {
   let out = src.replace(/<script[\s\S]*?<\/script>/g, '')
   // The built-in catalogue: from the snippet header to its closing tag.
   out = out.replace(/\{#snippet icon\(name: GridIconName\)\}[\s\S]*?\n\{\/snippet\}/g, '')
-  out = out.replace(/\{#snippet ic\(name: GridIconName\)\}[\s\S]*?\{\/snippet\}/g, '')
   return out
 }
 

package/src/index.ts

@@ -121,6 +121,23 @@ export type {
   SchedulerOccurrenceChangeEvent,
 } from './SvGrid.types'
 export { registerSchedulerView, getSchedulerView, hasSchedulerView } from './scheduler-view.svelte'
+// Gantt view. Same split as the scheduler: the `gantt` prop and its config
+// types live in the free grid, the RENDERER ships in @svgrid/enterprise and
+// registers itself through this seam (see gantt-view.svelte.ts). Unlike the
+// scheduler, the Gantt's layout model lives in enterprise too - only the
+// renderer reads it.
+export type {
+  GanttConfig,
+  GanttDrawerConfig,
+  GanttTaskMoveEvent,
+  GanttTaskResizeEvent,
+  GanttProgressChangeEvent,
+  GanttTaskCommitEvent,
+  GanttDependency,
+  GanttDependencyType,
+  GanttZoom,
+} from './SvGrid.types'
+export { registerGanttView, getGanttView, hasGanttView } from './gantt-view.svelte'
 // Bulk-action bar over the row selection. Prop + types free, renderer Pro.
 export { registerSelectionBarView, getSelectionBarView, hasSelectionBarView } from './selection-bar-view.svelte'
 // Chart view. The `chart` prop + its config live in the free grid AND so does the
@@ -754,31 +771,42 @@ export {
 export {
   createServerDataSource,
   type ServerDataSource,
+  type ServerSelectionRule,
   type ServerRequest,
   type ServerResult,
   type ServerController,
+  type ServerControllerOptions,
   type ServerState,
   type ServerSortModel,
   type ServerFilterModel,
+  type ServerAggFn,
   type ServerAggregation,
   type ServerGroupRow,
   type ServerLeafRow,
   type ServerMoreRow,
   type ServerFooterRow,
   type ServerSkeletonRow,
+  type ServerGrandTotalRow,
+  type ServerPlaceholderRow,
   type ServerDisplayRow,
+  type ServerDetailRow,
 } from './server-data-source'
 export {
-  createServerGroupModel,
-  serverGroupRows,
-  serverGroupNav,
-  type ServerGroupController,
-  type ServerGroupControllerOptions,
-  type ServerGroupState,
-  type ServerGroupGridRow,
-} from './server-group-model'
-export { default as SvGroupCell } from './SvGroupCell.svelte'
-export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte'
+  createBlockCache,
+  createRowPlaceholder,
+  rowPlaceholderState,
+  type BlockCache,
+  type BlockCacheOptions,
+  type BlockCacheState,
+  type BlockFetchResult,
+  type BlockState,
+} from './server-block-cache'
+export {
+  toServerFilterColumns,
+  type GridRowModel,
+  type GridFilterState,
+  type GridRowModelSort,
+} from './row-model'
 export {
   createNamedViews,
   memoryViews,

package/src/keyboard-handlers.coverage.test.ts

@@ -576,6 +576,17 @@ describe('onWindowKeydown', () => {
     expect(ctx.closeMenus).toHaveBeenCalled()
   })
 
+  it('Escape closes the funnel filter popover, the value suggestions and the column chooser too', () => {
+    // The filter popover focuses its condition input, so Escape from there
+    // used to go unanswered while the column menu closed as expected.
+    for (const open of [{ filterMenuFor: 'col1' }, { inSuggestFor: 'col1' }, { chooseColumnsPos: { x: 1, y: 1 } }]) {
+      const ctx = makeCtx(open)
+      const { onWindowKeydown } = createKeyboard(ctx)
+      onWindowKeydown(new KeyboardEvent('keydown', { key: 'Escape' }))
+      expect(ctx.closeMenus).toHaveBeenCalled()
+    }
+  })
+
   it('does nothing when no menu is open', () => {
     const ctx = makeCtx()
     const { onWindowKeydown } = createKeyboard(ctx)
@@ -678,3 +689,57 @@ describe('onHeaderSortClick', () => {
     expect(ctx._state.sorting).toEqual([{ id: 'name', desc: false }])
   })
 })
+
+describe('onGridKeyDown / Ctrl+Enter on a server-side tree', () => {
+  const tree = () => {
+    const toggle = vi.fn()
+    const toggleDetail = vi.fn()
+    const rows = [
+      { original: { id: 'g', kind: 'group' } },
+      { original: { id: 'a', kind: 'leaf' } },
+    ]
+    const serverGroup = {
+      isGroup: (r: { kind: string }) => r.kind === 'group',
+      level: () => 0,
+      onToggle: toggle,
+      toggleDetail,
+    }
+    return { toggle, toggleDetail, rows, serverGroup }
+  }
+
+  it('opens or closes the group under the active cell', () => {
+    const t = tree()
+    const ctx = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup, renderDetailRow: () => {} }, state: { activeCell: { rowIndex: 0, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggle).toHaveBeenCalledWith(t.rows[0]!.original)
+    expect(t.toggleDetail).not.toHaveBeenCalled()
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+  })
+
+  it('opens or closes the detail panel under a leaf, when the grid draws one', () => {
+    const t = tree()
+    const ctx = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup, renderDetailRow: () => {} }, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggleDetail).toHaveBeenCalledWith(t.rows[1]!.original)
+    expect(t.toggle).not.toHaveBeenCalled()
+    // Without a renderer there is no panel to open: Enter falls through to editing.
+    const plain = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup }, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(plain).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggleDetail).toHaveBeenCalledTimes(1)
+    expect(plain.onCellDoubleClick).toHaveBeenCalled()
+  })
+
+  it('on a client master-detail calls onDetailToggle with the row, never on the detail row itself', () => {
+    const onDetailToggle = vi.fn()
+    const rows = [{ original: { id: 'a', kind: 'data' } }, { original: { id: 'a-detail', kind: 'detail' } }]
+    const props = { rowHeight: 30, renderDetailRow: () => {}, onDetailToggle, isDetailRow: (r: { kind: string }) => r.kind === 'detail' }
+    const ctx = makeCtx({ allRows: rows, props, state: { activeCell: { rowIndex: 0, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(onDetailToggle).toHaveBeenCalledWith(rows[0]!.original, 0)
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+    const onDetail = makeCtx({ allRows: rows, props, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(onDetail).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(onDetailToggle).toHaveBeenCalledTimes(1)
+    expect(onDetail.onCellDoubleClick).toHaveBeenCalled()
+  })
+})

package/src/keyboard-handlers.ts

@@ -193,6 +193,28 @@ export function createKeyboard<
         row.toggleExpanded?.();
         return;
       }
+      // The same key on a server-side tree: a group opens or closes, a leaf
+      // opens or closes its detail panel when the grid draws one.
+      const sg = ctx.props.serverGroup;
+      if (event.ctrlKey && sg && row) {
+        const data = row.original;
+        if (sg.isGroup(data)) {
+          sg.onToggle(data);
+          return;
+        }
+        if (sg.toggleDetail && ctx.props.renderDetailRow && (sg.hasDetail?.(data) ?? true)) {
+          sg.toggleDetail(data);
+          return;
+        }
+      }
+      // ...and on a client-side master-detail: the app's own toggle.
+      if (event.ctrlKey && row && ctx.props.onDetailToggle && ctx.props.renderDetailRow) {
+        const data = row.original;
+        if (!ctx.props.isDetailRow?.(data, current.rowIndex) && (ctx.props.hasDetail?.(data) ?? true)) {
+          ctx.props.onDetailToggle(data, current.rowIndex);
+          return;
+        }
+      }
       if (column?.columnDef.editorType === "checkbox") {
         ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
         return;
@@ -287,7 +309,10 @@ export function createKeyboard<
   }
 
   function onWindowKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape" && (ctx.columnMenuFor || ctx.operatorMenuFor)) {
+    if (
+      event.key === "Escape" &&
+      (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.filterMenuFor || ctx.inSuggestFor || ctx.chooseColumnsPos)
+    ) {
       ctx.closeMenus();
     }
   }

package/src/keyboard.ts

@@ -50,6 +50,9 @@ export function getKeyboardIntent(event: KeyboardEvent): GridKeyboardIntent {
   //   Tab        → move right (Shift+Tab → left), wraps at row boundaries
   //   Delete     → clear contents of the selected cells
   //   F2 / Space → start editing the active cell
+  // Ctrl+Enter acts on the row rather than moving: a group opens or closes,
+  // a row with a detail panel shows or hides it (see the activate branch).
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) return 'activate'
   if (event.key === 'Enter') return event.shiftKey ? 'moveUp' : 'moveDown'
   if (event.key === 'Tab') return event.shiftKey ? 'tabPrev' : 'tabNext'
   if (event.key === 'F2') return 'activate'

package/src/row-drag-touch.ts

@@ -23,7 +23,7 @@ export type TouchDragDeps = {
   ctx: any;
   managed: () => boolean;
   originalAt: (rowIndex: number) => unknown;
-  commitDropOnRow: (rowIndex: number, side: "before" | "after") => void;
+  commitDropOnRow: (rowIndex: number, side: "before" | "after" | "into") => void;
   clearIndicators: () => void;
   cancelPendingLeave: () => void;
   /** Publish the dragged row on the shared cross-grid bus. */
@@ -135,7 +135,7 @@ export function createTouchDrag(deps: TouchDragDeps): TouchDragHandle {
     if (commit && ctx.rowDropIndex != null) {
       deps.commitDropOnRow(
         ctx.rowDropIndex as number,
-        (ctx.rowDropSide ?? "before") as "before" | "after",
+        (ctx.rowDropSide ?? "before") as "before" | "after" | "into",
       );
     } else {
       deps.clearIndicators();