@freighttech/ui 0.13.18

package/src/backend/dynamic-table/__tests__/ConfigureViewPanel.baseView.test.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import ConfigureViewPanel from '../components/ConfigureViewPanel'
+import { BASE_VIEW_PERSPECTIVE_NAME } from '../types/perspective'
+import type { PerspectiveConfig } from '../types/perspective'
+import type { ColumnDef } from '../types/index'
+
+/**
+ * THE BASE-VIEW SAVE GAP.
+ *
+ * `handleSave` used to be gated on `if (saveName.trim())` and always minted a
+ * fresh id. Two consequences, both reported as bugs rather than as design:
+ *
+ *   1. The "Default view" tab had NO save path at all. Hiding a column there
+ *      survived until the next reload — half of why workshop A5 read as data
+ *      loss ("my changes disappeared").
+ *   2. Because the id was always new, the host could only match a save back to
+ *      a row BY NAME, so renaming a view in this drawer CLONED it.
+ *
+ * These tests pin both fixes, plus the per-user guarantee that the base view is
+ * an ordinary personal row and therefore cannot leak to anyone else.
+ */
+
+const columns: ColumnDef[] = [
+  { data: 'client', title: 'Client' },
+  { data: 'amount', title: 'Amount', type: 'numeric' },
+]
+
+const noop = () => {}
+
+function renderPanel(props: Record<string, unknown> = {}) {
+  const onSavePerspective = jest.fn()
+  const utils = render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(ConfigureViewPanel as any, {
+        isOpen: true,
+        onOpenChange: noop,
+        columns,
+        visibleColumns: ['client'],
+        hiddenColumns: ['amount'],
+        filters: [],
+        sortRules: [],
+        onColumnVisibilityChange: noop,
+        onFiltersChange: noop,
+        onSortRulesChange: noop,
+        onSavePerspective,
+        activePerspectiveId: null,
+        isBaseViewMode: true,
+        ...props,
+      }),
+    ),
+  )
+  return { ...utils, onSavePerspective }
+}
+
+const nameInput = () =>
+  document.querySelector('.hot-config-panel-save input') as HTMLInputElement
+
+const primaryButton = () =>
+  Array.from(document.querySelectorAll('.hot-config-panel-footer button')).at(-1) as HTMLButtonElement
+
+describe('saving the Default view', () => {
+  it('offers a save with no name, and says so on the button', () => {
+    renderPanel()
+    expect(primaryButton()).toHaveTextContent('Save Default view')
+    expect(primaryButton()).not.toBeDisabled()
+    expect(screen.getByText(/Leave the name empty/)).toBeInTheDocument()
+  })
+
+  it('writes the current arrangement as this user\'s base-view row', () => {
+    const { onSavePerspective } = renderPanel()
+    fireEvent.click(primaryButton())
+
+    expect(onSavePerspective).toHaveBeenCalledTimes(1)
+    const saved: PerspectiveConfig = onSavePerspective.mock.calls[0][0]
+    expect(saved.isBaseView).toBe(true)
+    expect(saved.name).toBe(BASE_VIEW_PERSPECTIVE_NAME)
+    expect(saved.columns).toEqual({ visible: ['client'], hidden: ['amount'] })
+    // No colour: the tab it personalizes is a fixed part of the strip.
+    expect(saved.color).toBeUndefined()
+  })
+
+  it('updates the existing base row instead of inserting a second one', () => {
+    const base: PerspectiveConfig = {
+      id: 'p-base-uuid',
+      name: BASE_VIEW_PERSPECTIVE_NAME,
+      columns: { visible: ['client', 'amount'], hidden: [] },
+      filters: [],
+      sorting: [],
+      isBaseView: true,
+    }
+    const { onSavePerspective } = renderPanel({
+      baseViewPerspective: base,
+      activePerspectiveId: 'p-base-uuid',
+    })
+    fireEvent.click(primaryButton())
+    expect(onSavePerspective.mock.calls[0][0].id).toBe('p-base-uuid')
+  })
+
+  it('still demands a name when the drawer was opened from "Add view"', () => {
+    // Same table state, different intent. "Add view" opens from the base tab
+    // too, and must not quietly overwrite the user's Default view.
+    renderPanel({ isBaseViewMode: false })
+    expect(primaryButton()).toHaveTextContent('Save as new view')
+    expect(primaryButton()).toBeDisabled()
+    expect(screen.queryByText(/Leave the name empty/)).toBeNull()
+  })
+
+  it('still creates a NEW named view the moment a name is typed', () => {
+    const { onSavePerspective } = renderPanel()
+    fireEvent.change(nameInput(), { target: { value: 'Tomorrow' } })
+    expect(primaryButton()).toHaveTextContent('Save as new view')
+
+    fireEvent.click(primaryButton())
+    const saved: PerspectiveConfig = onSavePerspective.mock.calls[0][0]
+    expect(saved.name).toBe('Tomorrow')
+    expect(saved.isBaseView).toBeUndefined()
+  })
+})
+
+describe('editing an existing view', () => {
+  const existing: PerspectiveConfig = {
+    id: 'p-uuid-1',
+    name: 'Open transports',
+    color: 'blue',
+    columns: { visible: ['client'], hidden: [] },
+    filters: [],
+    sorting: [],
+    origin: { templateId: 'tmpl-1', version: 'v1', name: 'Ops standard', copiedAt: '' },
+    publication: { roleIds: ['role-a'], publishedAt: '2026-08-03T00:00:00.000Z' },
+  }
+
+  it('keeps the row\'s id through a RENAME, so the save updates rather than clones', () => {
+    const { onSavePerspective } = renderPanel({
+      editingPerspective: existing,
+      activePerspectiveId: 'p-uuid-1',
+    })
+    expect(primaryButton()).toHaveTextContent('Save view')
+
+    fireEvent.change(nameInput(), { target: { value: 'Open transports (renamed)' } })
+    fireEvent.click(primaryButton())
+
+    const saved: PerspectiveConfig = onSavePerspective.mock.calls[0][0]
+    expect(saved.id).toBe('p-uuid-1')
+    expect(saved.name).toBe('Open transports (renamed)')
+  })
+
+  it('carries the template origin forward, so a copy never forgets where it came from', () => {
+    const { onSavePerspective } = renderPanel({
+      editingPerspective: existing,
+      activePerspectiveId: 'p-uuid-1',
+    })
+    fireEvent.click(primaryButton())
+    const saved: PerspectiveConfig = onSavePerspective.mock.calls[0][0]
+    expect(saved.origin).toEqual(existing.origin)
+    expect(saved.publication).toEqual(existing.publication)
+    expect(saved.isBaseView).toBeUndefined()
+  })
+})

package/src/backend/dynamic-table/__tests__/ConfigureViewPanel.focus.test.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import ConfigureViewPanel from '../components/ConfigureViewPanel'
+import type { ColumnDef } from '../types/index'
+
+/**
+ * Regression: the drawer must not put the caret in the VIEW NAME box on open.
+ *
+ * Found by driving the drawer in a browser, not by reading the code. The name
+ * input carried `autoFocus`, which was harmless when this panel was only a save
+ * form. It is data corruption now that the panel is a multi-section editor: the
+ * first thing typed into "Calculated columns" — or any section the user has not
+ * yet clicked into — was appended to the view's NAME. A real saved view came
+ * out called `Koszty teczekDlugosc notatkiLEN(notes)`, silently.
+ */
+const columns: ColumnDef[] = [
+  { data: 'reference', title: 'Reference #' },
+  { data: 'client', title: 'Client' },
+]
+
+function renderPanel() {
+  return render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(ConfigureViewPanel, {
+        isOpen: true,
+        onOpenChange: jest.fn(),
+        columns,
+        visibleColumns: ['reference', 'client'],
+        hiddenColumns: [],
+        filters: [],
+        sortRules: [],
+        onColumnVisibilityChange: jest.fn(),
+        onFiltersChange: jest.fn(),
+        onSortRulesChange: jest.fn(),
+        onSavePerspective: jest.fn(),
+      } as any),
+    ),
+  )
+}
+
+describe('ConfigureViewPanel focus', () => {
+  it('does not steal the caret into the view-name box when it opens', () => {
+    renderPanel()
+    const name = document.querySelector(
+      '.hot-config-panel-save input',
+    ) as HTMLInputElement | null
+    expect(name).toBeTruthy()
+    expect(name).not.toHaveAttribute('autofocus')
+    expect(document.activeElement).not.toBe(name)
+  })
+})

package/src/backend/dynamic-table/__tests__/ConfigureViewPanel.sections.test.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import ConfigureViewPanel from '../components/ConfigureViewPanel'
+import type { ColumnDef } from '../types/index'
+
+/**
+ * The Configure View drawer is the only route a user has to the highlighting
+ * and calculated-column editors. Both were built and left unreferenced, so
+ * these assert that the drawer OFFERS them, and that saving a view carries
+ * what they produced.
+ */
+
+const columns: ColumnDef[] = [
+  { data: 'client', title: 'Client' },
+  { data: 'amount', title: 'Amount', type: 'numeric' },
+]
+
+const noop = () => {}
+
+function renderPanel(props: Record<string, unknown> = {}) {
+  const onSavePerspective = jest.fn()
+  render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(ConfigureViewPanel as any, {
+        isOpen: true,
+        onOpenChange: noop,
+        columns,
+        visibleColumns: ['client', 'amount'],
+        hiddenColumns: [],
+        filters: [],
+        sortRules: [],
+        onColumnVisibilityChange: noop,
+        onFiltersChange: noop,
+        onSortRulesChange: noop,
+        onSavePerspective,
+        ...props,
+      }),
+    ),
+  )
+  return { onSavePerspective }
+}
+
+const sectionTitles = () =>
+  Array.from(document.querySelectorAll('.hot-config-section-title')).map((el) => el.textContent)
+
+function openSection(title: string) {
+  const header = Array.from(document.querySelectorAll('.hot-config-section-header')).find((el) =>
+    (el.textContent ?? '').includes(title),
+  ) as HTMLElement | undefined
+  if (!header) throw new Error(`No "${title}" section in the drawer`)
+  fireEvent.click(header)
+}
+
+describe('ConfigureViewPanel — sections the wave-1 editors need', () => {
+  it('offers Highlighting once the host can persist the rules', () => {
+    renderPanel({ onConditionalFormatsChange: noop })
+    expect(sectionTitles()).toContain('Highlighting')
+    openSection('Highlighting')
+    expect(document.querySelector('[data-conditional-format-editor]')).toBeTruthy()
+  })
+
+  it('offers Calculated columns once the host can persist them', () => {
+    renderPanel({ onFormulasChange: noop })
+    expect(sectionTitles()).toContain('Calculated columns')
+    openSection('Calculated columns')
+    expect(document.querySelector('[data-testid="formula-section"]')).toBeTruthy()
+  })
+
+  it('hides both when the host wires neither — no dead section headers', () => {
+    renderPanel()
+    expect(sectionTitles()).not.toContain('Highlighting')
+    expect(sectionTitles()).not.toContain('Calculated columns')
+  })
+
+  it('badges each section with how much is configured', () => {
+    renderPanel({
+      onConditionalFormatsChange: noop,
+      onFormulasChange: noop,
+      conditionalFormats: [
+        { id: 'cf-1', field: 'client', operator: 'isEmpty', style: 'red' },
+        { id: 'cf-2', field: 'client', operator: 'isNotEmpty', style: 'green' },
+      ],
+      formulas: [
+        { key: 'formula__x', label: 'X', expression: 'amount * 2', resultType: 'number' },
+      ],
+    })
+    const badges = Array.from(document.querySelectorAll('.hot-config-section-badge')).map(
+      (el) => el.textContent,
+    )
+    // Bare count: '2 rules' rendered '1 rules' at count 1, and this i18n layer
+    // has no plural forms. Every section badge is now just the number.
+    expect(badges).toContain('2')
+    expect(badges).toContain('1')
+  })
+
+  it('carries highlighting and calculated columns into the saved view', () => {
+    const rules = [{ id: 'cf-1', field: 'client', operator: 'isEmpty', style: 'red' }]
+    const formulas = [
+      { key: 'formula__x', label: 'X', expression: 'amount * 2', resultType: 'number' },
+    ]
+    const { onSavePerspective } = renderPanel({
+      onConditionalFormatsChange: noop,
+      onFormulasChange: noop,
+      conditionalFormats: rules,
+      formulas,
+    })
+
+    const nameInput = document.querySelector('.hot-config-panel-save input') as HTMLInputElement
+    fireEvent.change(nameInput, { target: { value: 'My view' } })
+    // The primary button now NAMES the outcome: with a typed name and no view
+    // being edited, saving creates a new view.
+    const saveBtn = Array.from(document.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Save as new view',
+    )!
+    fireEvent.click(saveBtn)
+
+    expect(onSavePerspective).toHaveBeenCalledTimes(1)
+    const saved = onSavePerspective.mock.calls[0][0]
+    expect(saved.conditionalFormats).toEqual(rules)
+    expect(saved.formulas).toEqual(formulas)
+  })
+
+  it('keeps calculated columns out of their own field picker, so a formula cannot reference itself', () => {
+    renderPanel({
+      onFormulasChange: noop,
+      columns: [...columns, { data: 'formula__x', title: 'X' }],
+      formulas: [
+        { key: 'formula__x', label: 'X', expression: 'amount * 2', resultType: 'number' },
+      ],
+    })
+    openSection('Calculated columns')
+    // The field picker lives inside the inline add-row editor (never a modal).
+    fireEvent.click(document.querySelector('[data-testid="formula-add"]') as HTMLElement)
+    const fieldButtons = Array.from(
+      document.querySelectorAll('[data-testid="formula-fields"] button'),
+    ).map((el) => el.textContent)
+    expect(fieldButtons).toEqual(['Client', 'Amount'])
+  })
+})

package/src/backend/dynamic-table/__tests__/ConfigureViewRollups.test.tsx

@@ -0,0 +1,228 @@
+import * as React from 'react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import ConfigureViewRollups from '../components/ConfigureViewRollups'
+import type { RollupColumnRef, RollupSourceOption } from '../types/rollup'
+
+/**
+ * The real `fms-files` registry, as the sources endpoint returns it. It is the
+ * interesting shape on purpose: one source multiplies 3 fields × up to 4
+ * functions (ten aggregates in total), the other is count-only.
+ */
+const SOURCES: RollupSourceOption[] = [
+  {
+    key: 'lines',
+    label: 'Cost lines',
+    countLabel: 'Lines',
+    sortable: true,
+    filterable: true,
+    aggregatable: true,
+    fields: [
+      { key: 'estimated_cost', label: 'Estimated cost', type: 'numeric', fns: ['sum', 'avg', 'min', 'max'] },
+      { key: 'actual_cost', label: 'Actual cost', type: 'numeric', fns: ['sum', 'avg', 'min', 'max'] },
+      { key: 'sold_amount', label: 'Sold', type: 'numeric', fns: ['sum'] },
+    ],
+  },
+  {
+    key: 'documents',
+    label: 'Documents',
+    countLabel: 'Documents',
+    sortable: true,
+    filterable: true,
+    aggregatable: true,
+    fields: [],
+  },
+]
+
+type Harness = {
+  onRollupColumnsChange: jest.Mock
+  onColumnVisibilityChange: jest.Mock
+}
+
+async function renderPicker(
+  rollupColumns: RollupColumnRef[],
+  opts: { visible?: string[]; hidden?: string[]; sources?: RollupSourceOption[] } = {},
+): Promise<Harness> {
+  const onRollupColumnsChange = jest.fn()
+  const onColumnVisibilityChange = jest.fn()
+  const loadRollupSources = jest.fn().mockResolvedValue(opts.sources ?? SOURCES)
+  render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(ConfigureViewRollups, {
+        rollupColumns,
+        onRollupColumnsChange,
+        loadRollupSources,
+        visibleColumns: opts.visible ?? ['id', 'referenceNumber'],
+        hiddenColumns: opts.hidden ?? [],
+        onColumnVisibilityChange,
+      }),
+    ),
+  )
+  // The section loads its sources lazily; wait for the spinner text to clear
+  // rather than for the editor, so the empty state is testable through the same
+  // harness.
+  await waitFor(() => expect(document.body.textContent).not.toContain('Loading…'))
+  return { onRollupColumnsChange, onColumnVisibilityChange }
+}
+
+const q = <T extends Element>(sel: string) => document.querySelector(sel) as T
+
+function openMenu(sel: string) {
+  fireEvent.click(q<HTMLButtonElement>(sel))
+}
+
+function menuOptions(sel: string): string[] {
+  openMenu(sel)
+  return Array.from(document.querySelectorAll('.hot-select-menu [role="option"]')).map((el) =>
+    (el.textContent ?? '').trim(),
+  )
+}
+
+function chooseOption(sel: string, label: string) {
+  openMenu(sel)
+  const option = Array.from(document.querySelectorAll('.hot-select-menu [role="option"]')).find(
+    (el) => (el.textContent ?? '').trim() === label,
+  )
+  if (!option) throw new Error(`No option "${label}" in ${sel}`)
+  fireEvent.click(option)
+}
+
+const COUNT: RollupColumnRef = {
+  source: 'lines',
+  field: 'id',
+  fn: 'count',
+  label: 'Cost lines · Lines',
+}
+
+describe('ConfigureViewRollups — the three-step picker', () => {
+  it('shows nothing to configure when the table has no rollup sources', async () => {
+    await renderPicker([], { sources: [] })
+    expect(document.body.textContent).toContain('Nothing on this table can be summarised yet')
+    expect(document.querySelector('[data-rollup-add]')).toBeNull()
+  })
+
+  it('adds ONE column, not the whole cross-product', async () => {
+    // The reason this picker exists: `lines` alone is ten aggregates. Clicking
+    // "Add" must not dump ten columns into the field list.
+    const { onRollupColumnsChange, onColumnVisibilityChange } = await renderPicker([])
+    fireEvent.click(q<HTMLButtonElement>('[data-rollup-add]'))
+    expect(onRollupColumnsChange).toHaveBeenCalledTimes(1)
+    const next = onRollupColumnsChange.mock.calls[0][0]
+    expect(next).toHaveLength(1)
+    expect(next[0]).toEqual(COUNT)
+    // …and the user sees it immediately — they named this exact aggregate.
+    expect(onColumnVisibilityChange).toHaveBeenCalledWith(
+      ['id', 'referenceNumber', 'rollup__lines__id__count'],
+      [],
+    )
+  })
+
+  it('never adds the same aggregate twice — Add moves on to the next one', async () => {
+    const { onRollupColumnsChange } = await renderPicker([COUNT])
+    fireEvent.click(q<HTMLButtonElement>('[data-rollup-add]'))
+    const next = onRollupColumnsChange.mock.calls[0][0]
+    expect(next).toHaveLength(2)
+    expect(next[1]).toMatchObject({ source: 'lines', field: 'estimated_cost', fn: 'sum' })
+  })
+
+  it('offers the record count plus each aggregatable field, and only legal functions', async () => {
+    await renderPicker([COUNT])
+    expect(menuOptions('[data-rollup-field]')).toEqual([
+      'Number of records',
+      'Estimated cost',
+      'Actual cost',
+      'Sold',
+    ])
+    // COUNT is the only function over records — the control stays visible so
+    // the row does not change shape, but there is nothing else to pick.
+    expect(q<HTMLButtonElement>('[data-rollup-fn]').disabled).toBe(true)
+  })
+
+  it('snaps the function to a legal one when the field changes', async () => {
+    const { onRollupColumnsChange, onColumnVisibilityChange } = await renderPicker([COUNT], {
+      visible: ['id', 'rollup__lines__id__count'],
+    })
+    chooseOption('[data-rollup-field]', 'Estimated cost')
+    const [next] = onRollupColumnsChange.mock.calls[0]
+    expect(next[0]).toMatchObject({ field: 'estimated_cost', fn: 'sum' })
+    // The label follows, so the header says what the column now is.
+    expect(next[0].label).toBe('Cost lines · Sum of Estimated cost')
+    // The column keeps its POSITION — it must not jump to the end because the
+    // user changed the function on a column they already placed.
+    expect(onColumnVisibilityChange).toHaveBeenCalledWith(
+      ['id', 'rollup__lines__estimated_cost__sum'],
+      [],
+    )
+  })
+
+  it('resets to the count when the source changes, because fields do not carry over', async () => {
+    const sum: RollupColumnRef = {
+      source: 'lines',
+      field: 'estimated_cost',
+      fn: 'sum',
+      label: 'Cost lines · Sum of Estimated cost',
+    }
+    const { onRollupColumnsChange } = await renderPicker([sum])
+    chooseOption('[data-rollup-source]', 'Documents')
+    const [next] = onRollupColumnsChange.mock.calls[0]
+    expect(next[0]).toMatchObject({ source: 'documents', field: 'id', fn: 'count' })
+    // "Documents · Documents" would read as a stutter.
+    expect(next[0].label).toBe('Documents')
+  })
+
+  it('refuses a change that would duplicate a column already in the view', async () => {
+    const sum: RollupColumnRef = {
+      source: 'lines',
+      field: 'estimated_cost',
+      fn: 'sum',
+      label: 'Cost lines · Sum of Estimated cost',
+    }
+    const { onRollupColumnsChange } = await renderPicker([COUNT, sum])
+    // Row 2 → "Number of records" would collide with row 1.
+    const fieldTriggers = document.querySelectorAll('[data-rollup-field]')
+    fireEvent.click(fieldTriggers[1])
+    const option = Array.from(document.querySelectorAll('.hot-select-menu [role="option"]')).find(
+      (el) => (el.textContent ?? '').trim() === 'Number of records',
+    )!
+    fireEvent.click(option)
+    expect(onRollupColumnsChange).not.toHaveBeenCalled()
+  })
+
+  it('removing a column also takes it out of the grid', async () => {
+    const { onRollupColumnsChange, onColumnVisibilityChange } = await renderPicker([COUNT], {
+      visible: ['id', 'rollup__lines__id__count'],
+    })
+    fireEvent.click(q<HTMLButtonElement>('.hot-config-filter-remove'))
+    expect(onRollupColumnsChange).toHaveBeenCalledWith([])
+    expect(onColumnVisibilityChange).toHaveBeenCalledWith(['id'], [])
+  })
+
+  it('clear all empties both the refs and the grid', async () => {
+    const { onRollupColumnsChange, onColumnVisibilityChange } = await renderPicker([COUNT], {
+      visible: ['id', 'rollup__lines__id__count'],
+    })
+    fireEvent.click(q<HTMLButtonElement>('.hot-config-clear-btn'))
+    expect(onRollupColumnsChange).toHaveBeenCalledWith([])
+    expect(onColumnVisibilityChange).toHaveBeenCalledWith(['id'], [])
+  })
+
+  it('disables Add once every aggregate the table offers is in the view', async () => {
+    const all: RollupColumnRef[] = [
+      COUNT,
+      ...['estimated_cost', 'actual_cost'].flatMap((field) =>
+        (['sum', 'avg', 'min', 'max'] as const).map((fn) => ({
+          source: 'lines',
+          field,
+          fn,
+          label: `${field} ${fn}`,
+        })),
+      ),
+      { source: 'lines', field: 'sold_amount', fn: 'sum', label: 'Sold' },
+      { source: 'documents', field: 'id', fn: 'count', label: 'Documents' },
+    ]
+    await renderPicker(all)
+    expect(q<HTMLButtonElement>('[data-rollup-add]').disabled).toBe(true)
+  })
+})

package/src/backend/dynamic-table/__tests__/ContextMenu.test.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ContextMenu, { ContextMenuAction } from '../components/ContextMenu'
+
+// ContextMenu is what pops at the cursor after a multi-cell drag finishes —
+// carrying the built-in Copy and optional "Comment / colour" actions. It also
+// backs row/column menus, so these tests cover the shared open/close + dispatch
+// contract the selection menu relies on.
+
+const actions: ContextMenuAction[] = [
+  { id: '__cellsel_copy', label: 'Copy' },
+  { id: '__cellsel_annotate', label: 'Comment / colour' },
+]
+
+function renderMenu(props: Partial<React.ComponentProps<typeof ContextMenu>> = {}) {
+  const onClose = props.onClose ?? jest.fn()
+  const onActionClick = props.onActionClick ?? jest.fn()
+  const utils = render(
+    React.createElement(ContextMenu, {
+      isOpen: true,
+      position: { x: 100, y: 100 },
+      actions,
+      onClose,
+      onActionClick,
+      ...props,
+    }),
+  )
+  return { ...utils, onClose, onActionClick }
+}
+
+describe('ContextMenu (selection menu)', () => {
+  it('renders nothing when closed', () => {
+    const { container } = renderMenu({ isOpen: false })
+    expect(container.querySelector('.context-menu')).toBeNull()
+  })
+
+  it('renders every action label when open', () => {
+    renderMenu()
+    expect(screen.getByText('Copy')).toBeInTheDocument()
+    expect(screen.getByText('Comment / colour')).toBeInTheDocument()
+  })
+
+  it('dispatches the clicked action id and then closes', () => {
+    const { onActionClick, onClose } = renderMenu()
+    fireEvent.click(screen.getByText('Copy'))
+    expect(onActionClick).toHaveBeenCalledWith('__cellsel_copy')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not dispatch or close for a disabled action', () => {
+    const { onActionClick, onClose } = renderMenu({
+      actions: [{ id: 'paste', label: 'Paste', disabled: true }],
+    })
+    fireEvent.click(screen.getByText('Paste'))
+    expect(onActionClick).not.toHaveBeenCalled()
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('renders separators without an action button', () => {
+    renderMenu({
+      actions: [
+        { id: 'copy', label: 'Copy' },
+        { id: 'sep', label: '', separator: true },
+        { id: 'delete', label: 'Delete' },
+      ],
+    })
+    // Two real actions, the separator is a div not a button.
+    expect(screen.getAllByRole('button')).toHaveLength(2)
+  })
+
+  it('closes on Escape', () => {
+    const { onClose } = renderMenu()
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('closes on an outside mousedown', () => {
+    const { onClose } = renderMenu()
+    fireEvent.mouseDown(document.body)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not close when clicking inside the menu', () => {
+    const { onClose, container } = renderMenu()
+    const menu = container.querySelector('.context-menu')!
+    fireEvent.mouseDown(menu)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+})