@svgrid/grid 3.0.4 → 3.0.6

package/src/server.ts

@@ -0,0 +1,49 @@
+/**
+ * `@svgrid/grid/server` - the server-side data primitives, with no Svelte in
+ * the import graph.
+ *
+ * Everything here is also on the package root. This entry point exists for
+ * code that must not pull `SvGrid.svelte` into its bundle or its test
+ * runner: a SvelteKit `+server.ts` shaping a `ServerRequest` into a query,
+ * a worker feeding a block cache, or `@svgrid/enterprise`'s own row model,
+ * whose unit tests run without the Svelte compiler.
+ */
+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 {
+  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'

package/src/sparkline.test.ts

@@ -59,6 +59,13 @@ describe('buildSparkline', () => {
     expect(g.bars[0]!.h).toBeCloseTo(g.bars[1]!.h)
   })
 
+  it('leaves a blank gap for a zero, marking only wins and losses', () => {
+    const g = buildSparkline([1, 0, -1, 0, 1], { type: 'winloss', height: 20 })!
+    // Two wins and a loss draw; the two zeros are gaps, as Excel draws them.
+    expect(g.bars).toHaveLength(3)
+    expect(g.bars.map((b) => b.negative)).toEqual([false, true, false])
+  })
+
   it('honors a fixed min/max scale', () => {
     const a = buildSparkline([5, 5, 5], { type: 'line', min: 0, max: 10 })!
     // flat series on a 0..10 scale sits at the vertical middle, not the top

package/src/sparkline.ts

@@ -102,11 +102,13 @@ export function buildSparkline(
     const barW = Math.max(1, slot - gap)
     const mid = height / 2
     const h = innerH / 2
-    const bars: SparklineBar[] = values.map((v, i) => {
+    const bars: SparklineBar[] = []
+    values.forEach((v, i) => {
       const x = pad + i * slot + (slot - barW) / 2
-      if (v > 0) return { x, y: mid - h, w: barW, h, negative: false }
-      if (v < 0) return { x, y: mid, w: barW, h, negative: true }
-      return { x, y: mid - 1, w: barW, h: 2, negative: false }
+      // A win/loss sparkline marks a win up and a loss down; a zero is a
+      // blank gap, no mark at all, the way Excel draws one.
+      if (v > 0) bars.push({ x, y: mid - h, w: barW, h, negative: false })
+      else if (v < 0) bars.push({ x, y: mid, w: barW, h, negative: true })
     })
     return { ...base, linePath: '', areaPath: '', bars, lastPoint: null }
   }

package/src/svgrid-wrapper.types.ts

@@ -146,6 +146,14 @@ export type SvGridApi<
   TFeatures extends TableFeatures,
   TData extends RowData,
 > = {
+  // ----- DOM -----
+  /**
+   * The grid's root element (`.sv-grid-root`), or null before mount and
+   * after unmount. For measuring, focusing, or reading the theme the grid
+   * is drawn with - the PDF export takes its colours from here.
+   */
+  getElement(): HTMLElement | null
+
   // ----- Cells -----
   /** Read a cell value from the underlying data at `rowIndex`. */
   getCellValue(rowIndex: number, columnId: string): unknown
@@ -430,6 +438,16 @@ export type SvGridApi<
   /** Snapshot of the current data array (pre-pipeline). */
   getData(): ReadonlyArray<TData>
 
+  /**
+   * The stable id the grid keys a row by: what the `getRowId` prop
+   * computed, or the row's position when no `getRowId` is set. Pass a
+   * display index (the space `getActiveCell`, `scrollToRow` and the cell
+   * methods use) or a row object; returns null for an unknown index or a
+   * row that is not in the data. Pair with `selectRows`, `toggleRowSelected`
+   * or an `applyTransaction` remove, all of which take these ids.
+   */
+  getRowId(row: number | TData): string | null
+
   /**
    * Snapshot of every column the grid currently knows about, in visual
    * order, with the human-readable header label. Use this when exporting
@@ -580,6 +598,20 @@ export type SvGridApi<
   canRedo(): boolean
   /** Wipe both stacks (e.g. after a server save commits the buffer). */
   clearHistory(): void
+  /**
+   * Mark every step recorded from now on with `tag`, until the next call;
+   * `undefined` stops the marking. The grid never reads the tag. It is for a
+   * consumer that shows one of several data sets through the grid (a
+   * workbook's sheets, say) and has to know which one the next Ctrl+Z would
+   * change before it lets the grid apply it: it tags the steps with the data
+   * set they were made on and asks `peekUndo` first.
+   */
+  setHistoryTag(tag: unknown): void
+  /** The step the next `undo()` would apply, or null when there is none. A
+   *  multi-cell action carries one tag, so it reports as one. */
+  peekUndo(): { tag: unknown } | null
+  /** The step the next `redo()` would apply, or null when there is none. */
+  peekRedo(): { tag: unknown } | null
 
   // ----- Keyboard commands -----
   /**

package/src/svgrid.api.test.ts

@@ -104,6 +104,27 @@ describe('SvGridApi - getData / getDisplayedRows', () => {
     }
   })
 
+  it('getRowId resolves a display index and a row object, and returns null for the unknown', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      // No getRowId prop: the id is the row's index as a string.
+      expect(api.getRowId(0)).toBe('0')
+      expect(api.getRowId(4)).toBe('4')
+      expect(api.getRowId(99)).toBeNull()
+      const third = api.getData()[2]!
+      expect(api.getRowId(third)).toBe('2')
+      expect(api.getRowId({ id: 999, name: 'x', team: 'x', salary: 0 })).toBeNull()
+      // After a sort the display index follows the new order.
+      api.setSort('salary', 'desc')
+      await Promise.resolve()
+      const topId = api.getRowId(0)
+      expect(topId).not.toBeNull()
+      expect(api.getData()[Number(topId)]!.salary).toBe(Math.max(...sampleRows.map((r) => r.salary)))
+    } finally {
+      destroy()
+    }
+  })
+
   it('getDisplayedRows returns the post-pipeline visible rows', async () => {
     const { api, destroy } = await mountGrid()
     try {

package/src/svgrid.charting.test.ts

@@ -754,7 +754,15 @@ describe('SvGrid built-in charting', () => {
   })
 
 
-  it('the builder opens from the panel with a live thumbnail per type, and a card switches the chart', { timeout: 20_000 }, async () => {
+  // The builder mounts a live SvGridChart per type, thirty of them, in one
+  // synchronous flush. Alone that is well under a second; under `--coverage`
+  // (instrumented chart code, every file of the suite in parallel workers)
+  // it took 22 s on a loaded machine and the four tests that open the
+  // builder timed out at 20 s, the last of them then reading a builder a
+  // timed-out neighbour left behind. The budget is for instrumentation,
+  // not for the product: `pnpm test` runs with coverage and is the gate.
+  const BUILDER_TIMEOUT = 90_000
+  it('the builder opens from the panel with a live thumbnail per type, and a card switches the chart', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -805,7 +813,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('the Format tab writes series labels, crosshair pills, a compact rule, a stack group and a style through configureChart', { timeout: 20_000 }, async () => {
+  it('the Format tab writes series labels, crosshair pills, a compact rule, a stack group and a style through configureChart', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -848,7 +856,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('the builder Data tab renders the panel pickers and both write the same tab', { timeout: 20_000 }, async () => {
+  it('the builder Data tab renders the panel pickers and both write the same tab', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -883,7 +891,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('localization.text relabels the panel and the builder; unset keys stay English', { timeout: 20_000 }, async () => {
+  it('localization.text relabels the panel and the builder; unset keys stay English', { timeout: BUILDER_TIMEOUT }, async () => {
     const { target, destroy } = await mountGrid({
       charting: { defaultOpen: true },
       localization: { text: { chartPanelTitle: 'Diagramm', chartGroupBy: 'Gruppieren nach', chartTypeBar: 'Balken', chartAdd: 'Diagramm hinzufügen', chartBuilderTitle: 'Diagramm-Editor', chartBuilderTabData: 'Daten', noRows: 'Keine Zeilen' } },

package/src/svgrid.context-menu.test.ts

@@ -137,6 +137,18 @@ describe('SvGrid context menu', () => {
     destroy()
   })
 
+  it('closes on Escape, so a keyboard user is not trapped under it', async () => {
+    const { target, destroy } = await mountGrid(true)
+    await tick()
+    await openContextMenu(target)
+    expect(target.querySelector('.sv-grid-context-menu')).not.toBeNull()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    await vi.waitFor(() => {
+      expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
+    })
+    destroy()
+  })
+
   it('does not open when contextMenu is omitted (native menu shows)', async () => {
     const { target, destroy } = await mountGrid(undefined)
     await tick()

package/src/svgrid.detail-rows.svelte.test.ts

@@ -0,0 +1,187 @@
+/**
+ * Detail rows under virtualization: `detailRowHeight` sizes a detail row for
+ * the virtualizer, so a master-detail grid no longer needs
+ * `virtualization={false}`.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: string; name: string; kind: 'data' | 'detail' }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [{ field: 'name', header: 'Name', width: 200 }]
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function rows(): Row[] {
+  const out: Row[] = []
+  for (let i = 0; i < 12; i += 1) {
+    out.push({ id: `r${i}`, name: `row ${i}`, kind: 'data' })
+    if (i === 1 || i === 4) out.push({ id: `d${i}`, name: `detail of ${i}`, kind: 'detail' })
+  }
+  return out
+}
+
+function mountGrid(extra: Record<string, unknown>) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows(),
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => r.id,
+        rowHeight: 30,
+        containerHeight: 300,
+        virtualization: true,
+        isDetailRow: (r: Row) => r.kind === 'detail',
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, destroy: () => { unmount(app); target.remove() } })
+        },
+        ...extra,
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+describe('detailRowHeight', () => {
+  it('sizes detail rows for the virtualizer and leaves the others at rowHeight', async () => {
+    const { api, target, destroy } = await mountGrid({ detailRowHeight: 120 })
+    try {
+      await tick()
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.classList.contains('sv-grid-detail-row-sized')).toBe(true)
+      expect(detail.style.height).toBe('120px')
+      // Index 2 is the detail under row 1; 3 is a plain row.
+      expect(api.getRowHeight(2)).toBe(120)
+      expect(api.getRowHeight(3)).toBe(30)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('takes a function of the row', async () => {
+    const { api, destroy } = await mountGrid({ detailRowHeight: (r: Row) => (r.id === 'd1' ? 80 : 200) })
+    try {
+      await tick()
+      expect(api.getRowHeight(2)).toBe(80)
+      expect(api.getRowHeight(6)).toBe(200)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('without one a detail row is auto height, as before', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: false })
+    try {
+      await tick()
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.classList.contains('sv-grid-detail-row-sized')).toBe(false)
+      expect(detail.style.height).toBe('')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('showDetailToggle', () => {
+  it('is a row-header column: sticky, no menu, no resize handle, a chevron per data row and none on a detail row', async () => {
+    const open = new Set<string>(['r1', 'r4'])
+    const toggled: string[] = []
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      columnResize: true,
+      columnMenu: true,
+      onDetailToggle: (r: Row) => toggled.push(r.id),
+      isDetailOpen: (r: Row) => open.has(r.id),
+      detailRowHeight: 60,
+    })
+    try {
+      await tick()
+      const head = target.querySelector<HTMLElement>('thead th.sv-grid-detail-toggle-column')!
+      expect(head).not.toBeNull()
+      expect(head.getAttribute('aria-hidden')).toBe('true')
+      expect(head.querySelector('.sv-grid-col-menu-btn, .sv-grid-column-resizer, [data-resize-handle]')).toBeNull()
+      expect(head.style.position || getComputedStyle(head).position).not.toBe('')
+      const first = target.querySelector<HTMLElement>('tbody tr.sv-grid-row:not(.sv-grid-detail-row)')!
+      const cell = first.querySelector<HTMLElement>('td.sv-grid-detail-toggle-cell')!
+      expect(cell).not.toBeNull()
+      // The gutter is not a data cell: nothing the keyboard or the selection can land on.
+      expect(cell.hasAttribute('data-svgrid-col')).toBe(false)
+      const chev = cell.querySelector<HTMLButtonElement>('button.sv-grid-detail-toggle')!
+      expect(chev.getAttribute('aria-expanded')).toBe('false')
+      expect(chev.getAttribute('aria-label')).toBe('Open details')
+      chev.click()
+      expect(toggled).toEqual(['r0'])
+      // Row 1 is open: its chevron says so; the detail row under it has a blank gutter cell.
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')]
+      const r1 = rowsAll.find((tr) => tr.textContent?.includes('row 1'))!
+      expect(r1.querySelector('button.sv-grid-detail-toggle')!.getAttribute('aria-expanded')).toBe('true')
+      expect(r1.querySelector('button.sv-grid-detail-toggle')!.getAttribute('aria-label')).toBe('Close details')
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.querySelector('button.sv-grid-detail-toggle')).toBeNull()
+      // The full-width cell spans the gutter too.
+      expect(detail.querySelector<HTMLTableCellElement>('td.sv-grid-detail-cell')!.colSpan).toBe(first.children.length)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves the chevron out where hasDetail says no, and sticks after the row numbers and the checkbox', async () => {
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      showRowNumbers: true,
+      showRowSelection: true,
+      onDetailToggle: () => {},
+      hasDetail: (r: Row) => r.id !== 'r0',
+    })
+    try {
+      await tick()
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row:not(.sv-grid-detail-row)')]
+      expect(rowsAll[0]!.querySelector('td.sv-grid-detail-toggle-cell button')).toBeNull()
+      expect(rowsAll[1]!.querySelector('td.sv-grid-detail-toggle-cell button')).not.toBeNull()
+      // Row number (56) + selection (44) sit before it.
+      const cell = rowsAll[1]!.querySelector<HTMLElement>('td.sv-grid-detail-toggle-cell')!
+      expect(cell.style.left).toBe('100px')
+      expect(cell.style.width).toBe('36px')
+      // The system cells come in that order, then the data.
+      const classes = [...rowsAll[1]!.children].map((td) => td.className.split(' ')[1])
+      expect(classes.slice(0, 3)).toEqual(['sv-grid-row-number-cell', 'sv-grid-selection-cell', 'sv-grid-detail-toggle-cell'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('on a server row model the seam decides: groups get no chevron, a leaf reads detailOpen and calls toggleDetail', async () => {
+    const calls: string[] = []
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      serverGroup: {
+        isGroup: (r: Row) => r.id === 'r0',
+        level: () => 0,
+        onToggle: () => {},
+        toggleDetail: (r: Row) => calls.push(r.id),
+        detailOpen: (r: Row) => r.id === 'r1',
+        hasDetail: (r: Row) => r.kind === 'data',
+      },
+    })
+    try {
+      await tick()
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')]
+      const r0 = rowsAll.find((tr) => tr.textContent?.includes('row 0'))!
+      const r1 = rowsAll.find((tr) => tr.textContent?.includes('row 1'))!
+      expect(r0.querySelector('button.sv-grid-detail-toggle')).toBeNull()
+      const chev = r1.querySelector<HTMLButtonElement>('button.sv-grid-detail-toggle')!
+      expect(chev.getAttribute('aria-expanded')).toBe('true')
+      chev.click()
+      expect(calls).toEqual(['r1'])
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/svgrid.filter-menu-scroll.test.ts

@@ -60,6 +60,14 @@ function mountGrid() {
   })
 }
 
+/**
+ * The close-on-scroll listener arms one animation frame after a popover
+ * mounts, so a scroll queued before the opening click cannot dismiss what
+ * that click opened. Every open helper waits that frame out before a case
+ * dispatches its scroll.
+ */
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
 async function openFilterMenu(target: HTMLElement) {
   const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
   expect(btn).not.toBeNull()
@@ -74,6 +82,7 @@ async function openFilterMenu(target: HTMLElement) {
     expect(menu).not.toBeNull()
     expect(menu!.querySelector('.sv-listbox')).not.toBeNull()
   })
+  await nextFrame()
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 

package/src/svgrid.gantt-seam.test.ts

@@ -0,0 +1,199 @@
+/**
+ * The FREE half of the Gantt view: the `gantt` prop, what the grid hands the
+ * renderer, and what shows when no Enterprise renderer is registered.
+ *
+ * The renderer itself is Pro and lives behind `registerGanttView`, so most of
+ * this suite deliberately never registers one - it asserts the upsell path.
+ * The last block registers a STUB renderer to pin the seam's contract: which
+ * props the grid passes, and that the rows arrive already filtered. The real
+ * renderer is covered by `gantt.dom.test.ts` in @svgrid/enterprise.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  columnFilteringFeature,
+  hasGanttView,
+  registerGanttView,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import { getGanttView } from './gantt-view.svelte'
+import GanttStub from './gantt-stub.test.svelte'
+import type { ColumnDef, GanttConfig, SvGridApi } from './index'
+
+type Task = { id: number; name: string; start: string; end: string; parentId: number | null }
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+const rows: Task[] = [
+  { id: 1, name: 'Discovery', start: '2026-09-01', end: '2026-09-10', parentId: null },
+  { id: 2, name: 'Interviews', start: '2026-09-01', end: '2026-09-04', parentId: 1 },
+  { id: 3, name: 'Build', start: '2026-09-10', end: '2026-09-30', parentId: null },
+]
+const cols: ColumnDef<typeof features, Task>[] = [
+  { field: 'name', header: 'Task', width: 180 },
+  { field: 'start', header: 'Start', width: 120 },
+  { field: 'end', header: 'End', width: 120 },
+]
+const gantt: GanttConfig<typeof features, Task> = {
+  startField: 'start',
+  endField: 'end',
+  parentField: 'parentId',
+}
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+const UPSELL = '.sv-grid-gantt-upsell'
+
+afterEach(() => {
+  // The seam is module-level state; a stub left registered would make every
+  // later "no renderer" assertion pass for the wrong reason.
+  registerGanttView(null as never)
+  document.body.innerHTML = ''
+})
+
+function mountGrid(extra: Record<string, unknown> = {}) {
+  return new Promise<{ api: SvGridApi<typeof features, Task>; target: HTMLElement; destroy: () => void }>(
+    (res, rej) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: { coreRowModel: createCoreRowModel() },
+          getRowId: (r: Task) => String(r.id),
+          containerHeight: 260,
+          virtualization: false,
+          gantt,
+          onApiReady(api: SvGridApi<typeof features, Task>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+          ...extra,
+        } as any,
+      })
+      queueMicrotask(() => {
+        if (!target.querySelector('.sv-grid-gantt-root')) rej(new Error('no gantt root'))
+      })
+    },
+  )
+}
+
+describe('gantt - without the Enterprise renderer', () => {
+  it('reports that no renderer is registered', () => {
+    // If this is ever true here, the suite is testing the Pro path by accident
+    // and every assertion below is meaningless.
+    expect(hasGanttView()).toBe(false)
+  })
+
+  it('renders the upsell note in place of the table', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+
+    const note = target.querySelector(UPSELL)!
+    expect(note).not.toBeNull()
+    expect(note.getAttribute('role')).toBe('note')
+    expect(note.textContent).toContain('@svgrid/enterprise')
+    expect(note.textContent).toContain('enableGanttView()')
+    // The table is replaced, not decorated - this is a view of the grid.
+    expect(target.querySelector('[role="grid"]')).toBeNull()
+    destroy()
+  })
+
+  it('says a license is needed, and links to it', async () => {
+    // Naming the package is what unblocks a developer trying it; saying a key
+    // is needed is what they have to know before shipping. Enterprise is
+    // runs without a key, so the wording must not imply the feature is inert without
+    // one - it says "watermark", which is what actually happens.
+    const { target, destroy } = await mountGrid()
+    await tick()
+
+    const license = target.querySelector('.sv-grid-upsell-license')!
+    expect(license).not.toBeNull()
+    expect(license.textContent).toContain('license key')
+    expect(license.textContent).toContain('watermark')
+
+    const link = license.querySelector('a')!
+    expect(link.getAttribute('href')).toBe('https://svgrid.com/pricing/')
+    expect(link.getAttribute('target')).toBe('_blank')
+    expect(link.getAttribute('rel')).toContain('noopener')
+    destroy()
+  })
+
+  it('shows the search box, and hides it on `searchable: false`', async () => {
+    const withBox = await mountGrid()
+    await tick()
+    const input = withBox.target.querySelector<HTMLInputElement>('.sv-grid-board-search input')!
+    expect(input).not.toBeNull()
+    expect(input.placeholder).toBe('Search tasks...')
+    withBox.destroy()
+
+    const without = await mountGrid({ gantt: { ...gantt, searchable: false } })
+    await tick()
+    expect(without.target.querySelector('.sv-grid-board-search')).toBeNull()
+    without.destroy()
+  })
+
+  it('is localizable, like the rest of the grid chrome', async () => {
+    const { target, destroy } = await mountGrid({
+      localization: {
+        text: { ganttUpsellTitle: 'Gantt-Ansicht', upsellLicense: 'Lizenz erforderlich.' },
+      },
+    })
+    await vi.waitFor(() => {
+      expect(target.querySelector(UPSELL)?.textContent).toContain('Gantt-Ansicht')
+      expect(target.querySelector('.sv-grid-upsell-license')?.textContent).toContain(
+        'Lizenz erforderlich.',
+      )
+    })
+    destroy()
+  })
+})
+
+describe('gantt - the renderer seam', () => {
+  // GanttStub stands in for @svgrid/enterprise's SvGridGantt: it writes every
+  // prop it receives into the DOM, so the grid's half of the contract is what
+  // those attributes say.
+  const stub = () => document.querySelector<HTMLElement>('.gantt-stub')!
+
+  it('mounts the registered renderer instead of the upsell', async () => {
+    registerGanttView(GanttStub as never)
+    expect(hasGanttView()).toBe(true)
+    expect(getGanttView()).not.toBeNull()
+
+    const { target, destroy } = await mountGrid()
+    await tick()
+    expect(target.querySelector(UPSELL)).toBeNull()
+    expect(target.querySelector('.gantt-stub')).not.toBeNull()
+    destroy()
+  })
+
+  it('hands it data, columns, the config and getRowId', async () => {
+    registerGanttView(GanttStub as never)
+    const { destroy } = await mountGrid()
+    await tick()
+
+    expect(stub().dataset.ids).toBe('1,2,3')
+    expect(stub().dataset.cols).toBe(String(cols.length))
+    expect(stub().dataset.start).toBe('start')
+    expect(stub().dataset.parent).toBe('parentId')
+    expect(stub().dataset.hasGetRowId).toBe('true')
+    destroy()
+  })
+
+  it("hands it the grid's FILTERED rows, so the search box flows through", async () => {
+    // This is what makes the Gantt a view of the grid rather than a second
+    // data path: the renderer never filters, it just draws what it is given.
+    registerGanttView(GanttStub as never)
+    const { target, destroy } = await mountGrid()
+    await tick()
+
+    const search = target.querySelector<HTMLInputElement>('.sv-grid-board-search input')!
+    search.value = 'Interviews'
+    search.dispatchEvent(new Event('input', { bubbles: true }))
+
+    await vi.waitFor(() => expect(stub().dataset.ids).toBe('2'))
+    destroy()
+  })
+})