@morscherlab/mint-sdk 1.1.25 → 1.2.0-beta.10

package/src/__tests__/components/JobsStatusTray.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
+import type { PluginJobCenterSource } from '../../composables/useJobsStatusTray'
 import type { JobState, JobStateInput, JobStatus } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
@@ -40,8 +41,7 @@ function job(status: JobStatus, id: string = status): JobStateInput {
 }
 
 async function openTray(options: {
-  jobs: JobStateInput[]
-  adapter?: Record<string, unknown>
+  source: PluginJobCenterSource
   slots?: Record<string, (props: { job: JobState }) => unknown>
 }) {
   const { slots, ...props } = options
@@ -60,7 +60,7 @@ async function openTray(options: {
 
 describe('JobsStatusTray', () => {
   it('shows awaiting input as active without default actions', async () => {
-    const wrapper = await openTray({ jobs: [job('awaiting_input')] })
+    const wrapper = await openTray({ source: { jobs: [job('awaiting_input')] } })
 
     expect([
       wrapper.text().includes('Waiting for input'),
@@ -69,15 +69,15 @@ describe('JobsStatusTray', () => {
     ]).toEqual([true, false, false])
   })
 
-  it('shows only actions supported by both capability and adapter', async () => {
+  it('shows only actions supported by both capability and source', async () => {
     const wrapper = await openTray({
-      jobs: [
-        { ...job('awaiting_input', 'input'), can_cancel: true },
-        { ...job('completed', 'done'), can_delete: true },
-      ],
-      adapter: {
-        cancelJob: vi.fn(),
-        deleteJob: vi.fn(),
+      source: {
+        jobs: [
+          { ...job('awaiting_input', 'input'), can_cancel: true },
+          { ...job('completed', 'done'), can_delete: true },
+        ],
+        cancelJob: vi.fn(async () => undefined),
+        deleteJob: vi.fn(async () => true),
       },
     })
 
@@ -91,7 +91,7 @@ describe('JobsStatusTray', () => {
   })
 
   it('exposes dialog state and closes on Escape', async () => {
-    const wrapper = await openTray({ jobs: [job('running')] })
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
     const trigger = wrapper.get('.mint-jobs-tray__trigger')
 
     await wrapper.get('[role="dialog"]').trigger('keydown', { key: 'Escape' })
@@ -104,15 +104,17 @@ describe('JobsStatusTray', () => {
 
   it('renders an individual delete action for an active capable job', async () => {
     const wrapper = await openTray({
-      jobs: [{ ...job('awaiting_input'), can_delete: true }],
-      adapter: { deleteJob: vi.fn() },
+      source: {
+        jobs: [{ ...job('awaiting_input'), can_delete: true }],
+        deleteJob: vi.fn(async () => true),
+      },
     })
 
     expect(wrapper.find('[aria-label="Delete job"]').exists()).toBe(true)
   })
 
   it('traps forward Tab navigation inside the modal dialog', async () => {
-    const wrapper = await openTray({ jobs: [job('running')] })
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
     const focusable = wrapper.findAll('button')
     const firstInsidePanel = wrapper.get('[aria-label="Close jobs"]')
     const lastInsidePanel = focusable[focusable.length - 1]!
@@ -124,7 +126,7 @@ describe('JobsStatusTray', () => {
   })
 
   it('traps reverse Tab navigation from the dialog container', async () => {
-    const wrapper = await openTray({ jobs: [job('running')] })
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
     const panel = wrapper.get('[role="dialog"]')
     const focusable = panel.findAll('button')
     const panelElement = panel.element as HTMLElement
@@ -136,7 +138,7 @@ describe('JobsStatusTray', () => {
   })
 
   it('exposes job selection through a keyboard-accessible button', async () => {
-    const wrapper = await openTray({ jobs: [job('running')] })
+    const wrapper = await openTray({ source: { jobs: [job('running')] } })
 
     await wrapper.get('.mint-jobs-tray__job-select').trigger('click')
 
@@ -145,7 +147,7 @@ describe('JobsStatusTray', () => {
 
   it('renders the job-actions slot once per row in both tabs with the row job', async () => {
     const wrapper = await openTray({
-      jobs: [job('running', 'R-1'), job('completed', 'C-1')],
+      source: { jobs: [job('running', 'R-1'), job('completed', 'C-1')] },
       slots: {
         'job-actions': ({ job: row }) =>
           h('button', { 'data-testid': 'open', 'data-job': row.job_id }, 'Open'),

package/src/__tests__/components/LcmsSequenceTable.test.ts

@@ -54,4 +54,26 @@ describe('LcmsSequenceTable', () => {
     expect(wrapper.emitted('duplicate')?.[0]).toEqual([0])
     expect(wrapper.emitted('remove')?.[0]).toEqual([0])
   })
+
+  it('reorders rows from the drag handle with Alt and the arrow keys', async () => {
+    const wrapper = mount(LcmsSequenceTable, {
+      props: { items: makeItems(), editable: true },
+    })
+
+    const handle = wrapper.findAll('.mint-lcms-sequence-table__drag-handle')[0]
+    expect(handle.element.tagName).toBe('BUTTON')
+    expect(handle.attributes('aria-label')).toContain('Reorder Batch_NEG_S1_001')
+
+    await handle.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('reorder')?.[0]).toEqual([0, 1])
+  })
+
+  it('does not reorder from the keyboard when not editable', async () => {
+    const wrapper = mount(LcmsSequenceTable, {
+      props: { items: makeItems() },
+    })
+
+    expect(wrapper.find('.mint-lcms-sequence-table__drag-handle').exists()).toBe(false)
+  })
 })

package/src/__tests__/components/PluginWorkspaceView.internal.test.ts

@@ -0,0 +1,230 @@
+import { mount } from '@vue/test-utils'
+import { computed, h, nextTick } from 'vue'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import AppLayout from '../../components/AppLayout.vue'
+import AppSidebar from '../../components/AppSidebar.vue'
+import AppTopBar from '../../components/AppTopBar.vue'
+import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
+import WorkspaceControlsInternal from '../../components/internal/WorkspaceControlsInternal.vue'
+import WorkspaceShellInternal from '../../components/internal/WorkspaceShellInternal.vue'
+import WorkspaceSidebarInternal from '../../components/internal/WorkspaceSidebarInternal.vue'
+import type { PillNavItem, SidebarToolSection } from '../../types'
+
+vi.mock('../../composables/usePlatformContext', () => ({
+  usePlatformContext: vi.fn(() => ({
+    isIntegrated: computed(() => false),
+    context: { value: { isIntegrated: false, theme: 'system' } },
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+    navigate: vi.fn(),
+    notify: vi.fn(),
+    sendToPlatform: vi.fn(),
+  })),
+}))
+
+vi.mock('../../composables/useTheme', () => ({
+  useTheme: vi.fn(() => ({
+    isDark: computed(() => false),
+    theme: computed(() => 'light'),
+    toggleTheme: vi.fn(),
+  })),
+}))
+
+const pillNav: PillNavItem[] = [
+  { id: 'data', label: 'Data' },
+  { id: 'results', label: 'Results' },
+]
+
+const panels: Record<string, SidebarToolSection[]> = {
+  data: [
+    { id: 'import', label: 'Import', defaultOpen: true },
+  ],
+  results: [
+    { id: 'display', label: 'Display', defaultOpen: true },
+  ],
+}
+
+interface WorkspaceSlotProps {
+  activeView: string
+  setActiveView: (viewId: string) => void
+}
+
+const globalOptions = {
+  plugins: [createPinia()],
+  stubs: {
+    'router-link': {
+      props: ['to', 'custom'],
+      template: `
+        <slot
+          v-if="custom"
+          :href="typeof to === 'string' ? to : '#'"
+          :navigate="() => {}"
+        />
+        <a v-else :href="typeof to === 'string' ? to : '#'"><slot /></a>
+      `,
+    },
+    BaseModal: {
+      template: '<div><slot /></div>',
+    },
+  },
+}
+
+describe('PluginWorkspaceView internal split', () => {
+  it('renders through WorkspaceShellInternal, WorkspaceSidebarInternal and WorkspaceControlsInternal', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'MS Uploader',
+        subtitle: 'Import and visualize',
+        pillNav,
+        panels,
+        sidebarTitle: 'Tools',
+        sidebarSubtitle: 'Current file',
+      },
+      slots: {
+        actions: () => h('button', { 'data-test': 'topbar-action' }, 'Run'),
+        'section-import': () => h('button', { 'data-test': 'import-action' }, 'Upload'),
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    // The public adapter renders its three internal pieces...
+    expect(wrapper.findComponent(WorkspaceShellInternal).exists()).toBe(true)
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(true)
+    expect(wrapper.findComponent(WorkspaceControlsInternal).exists()).toBe(true)
+
+    // ...each of which wraps the same underlying SDK components with the same DOM output
+    // the pre-split component produced.
+    expect(wrapper.findComponent(AppLayout).props()).toMatchObject({
+      floating: true,
+      responsiveSidebar: true,
+      sidebarPosition: 'left',
+    })
+    expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
+      title: 'MS Uploader',
+      subtitle: 'Import and visualize',
+      pillNav,
+      currentPillId: 'data',
+    })
+    expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
+      panels,
+      activeView: 'data',
+      title: 'Tools',
+      subtitle: 'Current file',
+      variant: 'analysis',
+      floating: false,
+      dense: true,
+    })
+    expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
+    expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('data')
+
+    // WorkspaceControlsInternal receives exactly the scoped-slot payload the default slot sees.
+    expect(wrapper.findComponent(WorkspaceControlsInternal).props('controls')).toMatchObject({
+      activeView: 'data',
+      values: {},
+    })
+  })
+
+  it('keeps topbar navigation and sidebar panels synchronized through the internal split', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        pillNav,
+        panels,
+      },
+      slots: {
+        default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
+      },
+      global: globalOptions,
+    })
+
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).props('sidebar')).toMatchObject({ activeView: 'results' })
+    expect(wrapper.get('[data-test="content"]').text()).toBe('results')
+    expect(wrapper.emitted('update:activeView')).toEqual([['results']])
+    expect(wrapper.emitted('pill-select')).toEqual([[{ id: 'results', label: 'Results' }]])
+  })
+
+  it('relays sidebar collapse, toggle, and form events unchanged through WorkspaceSidebarInternal', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Analysis',
+        panels,
+        forms: {
+          data: { sections: [] },
+        },
+      },
+      global: globalOptions,
+    })
+
+    const sidebar = wrapper.findComponent(AppSidebar)
+    sidebar.vm.$emit('update:collapsed', true)
+    sidebar.vm.$emit('update:toggle', 'import', false)
+    sidebar.vm.$emit('section-action', 'import', 'refresh')
+    sidebar.vm.$emit('form-submit', 'data', { value: 1 })
+    sidebar.vm.$emit('form-cancel', 'data')
+    await nextTick()
+
+    expect(wrapper.emitted('update:sidebarCollapsed')).toEqual([[true]])
+    expect(wrapper.emitted('update:toggle')).toEqual([['import', false]])
+    expect(wrapper.emitted('section-action')).toEqual([['import', 'refresh']])
+    expect(wrapper.emitted('form-submit')).toEqual([['data', { value: 1 }]])
+    expect(wrapper.emitted('form-cancel')).toEqual([['data']])
+  })
+
+  it('can render without a sidebar surface, omitting WorkspaceSidebarInternal entirely', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Simple Plugin',
+        showSidebar: false,
+      },
+      slots: {
+        default: () => h('main', { 'data-test': 'content' }, 'Ready'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.findComponent(AppTopBar).props('title')).toBe('Simple Plugin')
+    expect(wrapper.get('[data-test="content"]').text()).toBe('Ready')
+  })
+
+  it('lets a consumer-supplied sidebar slot override WorkspaceSidebarInternal', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        title: 'Custom Sidebar',
+        panels,
+      },
+      slots: {
+        sidebar: () => h('aside', { 'data-test': 'custom-sidebar' }, 'Custom'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(WorkspaceSidebarInternal).exists()).toBe(false)
+    expect(wrapper.findComponent(AppSidebar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="custom-sidebar"]').text()).toBe('Custom')
+  })
+
+  it('lets a consumer-supplied topbar slot override WorkspaceShellInternal default AppTopBar rendering', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { title: 'Custom Top Bar' },
+      slots: {
+        topbar: () => h('header', { 'data-test': 'custom-topbar' }, 'Custom'),
+      },
+      global: globalOptions,
+    })
+
+    expect(wrapper.findComponent(AppTopBar).exists()).toBe(false)
+    expect(wrapper.get('[data-test="custom-topbar"]').text()).toBe('Custom')
+  })
+})

package/src/__tests__/components/RackEditor.test.ts

@@ -122,4 +122,39 @@ describe('RackEditor', () => {
       }),
     ])
   })
+
+  it('reorders rack tabs with Alt and the arrow keys', async () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', slot: 'G', wells: {} })
+
+    const wrapper = mount(RackEditor, { props: { modelValue: racks } })
+
+    await wrapper.findAll('.mint-rack-editor__tab')[0].trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('rack-reorder')?.at(-1)?.[0]).toEqual(['rack-2', 'rack-1'])
+    expect(wrapper.findAll('.mint-rack-editor__tab').map(tab => tab.text()))
+      .toEqual([expect.stringContaining('Rack 2'), expect.stringContaining('Rack 1')])
+    expect(wrapper.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('does not reorder rack tabs from the keyboard when reordering is off', async () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', slot: 'G', wells: {} })
+
+    const wrapper = mount(RackEditor, {
+      props: { modelValue: racks, allowReorder: false },
+    })
+
+    await wrapper.findAll('.mint-rack-editor__tab')[0].trigger('keydown', {
+      key: 'ArrowRight',
+      altKey: true,
+    })
+    await nextTick()
+
+    expect(wrapper.emitted('rack-reorder')).toBeUndefined()
+  })
 })

package/src/__tests__/components/ReagentList.test.ts

@@ -63,7 +63,7 @@ describe('ReagentList', () => {
       },
     })
 
-    await wrapper.findAll('th')[1].trigger('click')
+    await wrapper.findAll('th')[1].get('.mint-reagent-list__sort-btn').trigger('click')
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows.map(row => row.text())).toEqual([
@@ -72,11 +72,73 @@ describe('ReagentList', () => {
       expect.stringContaining('Pyruvate'),
     ])
 
-    await wrapper.findAll('th')[1].trigger('click')
+    await wrapper.findAll('th')[1].get('.mint-reagent-list__sort-btn').trigger('click')
     expect(wrapper.findAll('tbody tr').map(row => row.text())).toEqual([
       expect.stringContaining('Lactate'),
       expect.stringContaining('Glucose'),
       expect.stringContaining('Pyruvate'),
     ])
   })
+
+  it('exposes sortable headers as buttons that sort from the keyboard', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, columns: ['name', 'catalog'] },
+    })
+
+    const nameHeader = () => wrapper.findAll('th')[0]
+    expect(nameHeader().attributes('aria-sort')).toBe('none')
+    expect(nameHeader().get('.mint-reagent-list__sort-btn').element.tagName).toBe('BUTTON')
+
+    await nameHeader().get('.mint-reagent-list__sort-btn').trigger('keydown', { key: 'Enter' })
+    expect(nameHeader().attributes('aria-sort')).toBe('ascending')
+
+    await nameHeader().get('.mint-reagent-list__sort-btn').trigger('keydown', { key: ' ' })
+    expect(nameHeader().attributes('aria-sort')).toBe('descending')
+  })
+
+  it('omits aria-sort when sorting is disabled', () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, sortable: false, columns: ['name'] },
+    })
+
+    expect(wrapper.findAll('th')[0].attributes('aria-sort')).toBeUndefined()
+  })
+
+  it('reorders reagents from the drag handle with Alt and the arrow keys', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, columns: ['name'] },
+    })
+
+    const handle = wrapper.findAll('.mint-reagent-list__drag-handle-btn')[0]
+    expect(handle.attributes('aria-label')).toContain('Reorder Glucose')
+
+    await handle.trigger('keydown', { key: 'ArrowDown', altKey: true })
+
+    expect(wrapper.emitted('reorder')?.[0]).toEqual(['reagent-1', 0, 1])
+    expect(
+      (wrapper.emitted('update:modelValue')?.[0]?.[0] as Reagent[]).map(reagent => reagent.id),
+    ).toEqual(['reagent-2', 'reagent-1'])
+  })
+
+  it('does not reorder from the keyboard while readonly', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, readonly: true, columns: ['name'] },
+    })
+
+    expect(wrapper.find('.mint-reagent-list__drag-handle-btn').exists()).toBe(false)
+  })
+
+  it('announces a keyboard reorder in a polite live region', async () => {
+    const wrapper = mount(ReagentList, {
+      props: { modelValue: reagents, columns: ['name'] },
+    })
+
+    await wrapper.findAll('.mint-reagent-list__drag-handle-btn')[0]
+      .trigger('keydown', { key: 'ArrowDown', altKey: true })
+    await wrapper.vm.$nextTick()
+
+    const liveRegion = wrapper.get('[role="status"]')
+    expect(liveRegion.attributes('aria-live')).toBe('polite')
+    expect(liveRegion.text()).toBe('Glucose moved to position 2 of 2.')
+  })
 })

package/src/__tests__/components/RetiredStyles.test.ts

@@ -6,9 +6,21 @@ const retiredSelectors: Record<string, readonly string[]> = {
   'app-plugin-switcher.css': [
     'mint-plugin-switcher__swatch',
   ],
+  'audit-trail.css': [
+    'mint-audit-trail__empty',
+  ],
+  'dataframe.css': [
+    'mint-dataframe__empty',
+    'mint-dataframe__empty-icon',
+    'mint-dataframe__empty-text',
+    'mint-dataframe__loading-spinner',
+  ],
   'dose-calculator.css': [
     'mint-dose-calculator__mw-input',
   ],
+  'experiment-data-viewer.css': [
+    'mint-data-viewer__empty',
+  ],
   'experiment-popover.css': [
     'mint-experiment-popover__check-icon',
     'mint-experiment-popover__divider',
@@ -24,13 +36,31 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-experiment-selector__filters',
     'mint-experiment-selector__status-filter',
   ],
+  'experiment-timeline.css': [
+    'mint-timeline__empty',
+    'mint-timeline__empty-btn',
+    'mint-timeline__empty-content',
+    'mint-timeline__empty-text',
+  ],
+  'lcms-sequence-table.css': [
+    'mint-lcms-sequence-table__empty',
+  ],
   'protocol-step-editor.css': [
     'mint-protocol-editor__field-row',
   ],
   'reagent-editor.css': [
     'mint-reagent-editor__row',
   ],
+  'reagent-list.css': [
+    'mint-reagent-list__empty',
+    'mint-reagent-list__empty-btn',
+    'mint-reagent-list__empty-icon',
+    'mint-reagent-list__empty-text',
+  ],
   'sample-hierarchy-tree.css': [
+    'mint-sample-tree__empty',
+    'mint-sample-tree__empty-icon',
+    'mint-sample-tree__empty-text',
     'mint-sample-tree__node--selected',
   ],
   'sample-selector.css': [
@@ -38,6 +68,7 @@ const retiredSelectors: Record<string, readonly string[]> = {
     'mint-popover-enter-from',
     'mint-popover-leave-active',
     'mint-popover-leave-to',
+    'mint-sample-selector__empty',
     'mint-sample-selector__level-badge',
     'mint-sample-selector__level-btn',
     'mint-sample-selector__level-desc',

package/src/__tests__/components/SampleSelector.drag.test.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it } from 'vitest'
 import type { SampleGroup } from '../../types'
 import { useSampleSelectorDrag } from '../../components/SampleSelector.drag'
@@ -9,6 +9,10 @@ type TestDragEvent = Omit<DragEvent, 'dataTransfer'> & {
   defaultPrevented: boolean
 }
 
+function keyboardEvent(key: string, altKey = true): KeyboardEvent {
+  return { key, altKey, preventDefault: () => {} } as unknown as KeyboardEvent
+}
+
 function createDragEvent(options: { clientY?: number; top?: number; height?: number } = {}) {
   const data: Record<string, string> = {}
   const transfer = {
@@ -123,4 +127,50 @@ describe('SampleSelector drag helpers', () => {
 
     expect(drag.reorderTarget.value).toBe('Liver / High / 10min')
   })
+
+  it('reorders sibling groups with Alt and the arrow keys', async () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Liver / High / 10min', color: '#222222', samples: ['L2'] },
+      { name: 'Liver / High / 20min', color: '#333333', samples: ['L3'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+
+    expect(state.value.map(group => group.name)).toEqual([
+      'Liver / High / 10min',
+      'Liver / High / 5min',
+      'Liver / High / 20min',
+    ])
+
+    await nextTick()
+    expect(drag.announcement.value).toBe('Liver / High / 5min moved down to position 2 of 3.')
+  })
+
+  it('keeps a group inside its own family and ignores arrows without Alt', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High / 5min', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High / 5min', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+    const before = state.value
+
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown'))
+    drag.handleGroupReorderKeydown('Liver / High / 5min', 'sub', keyboardEvent('ArrowDown', false))
+
+    expect(state.value).toBe(before)
+  })
+
+  it('reorders whole major families with Alt and the arrow keys', () => {
+    const state = ref<SampleGroup[]>([
+      { name: 'Liver / High', color: '#111111', samples: ['L1'] },
+      { name: 'Muscle / High', color: '#222222', samples: ['M1'] },
+    ])
+    const drag = useSampleSelectorDrag(state)
+
+    drag.handleGroupReorderKeydown('Muscle', 'major', keyboardEvent('ArrowUp'))
+
+    expect(state.value.map(group => group.name)).toEqual(['Muscle / High', 'Liver / High'])
+  })
 })