@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

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

@@ -76,7 +76,7 @@ describe('PlateEditor — controlled data', () => {
   it('should leave modelValue untouched when a well is edited', async () => {
     const racks = makeRacks()
     const snapshot = structuredClone(racks)
-    const wrapper = mountEditor({ modelValue: racks, sampleDrop: true, fillSeries: true, clear: 'undo' })
+    const wrapper = mountEditor({ spec: { sampleDrop: true, fillSeries: true, clear: 'undo' }, modelValue: racks })
 
     plate(wrapper).vm.$emit('well-edit', 'A2', editData)
     plate(wrapper).vm.$emit('well-move', 'A1', 'B1')
@@ -119,43 +119,43 @@ describe('PlateEditor — controlled data', () => {
   })
 
   it('should hide the toolbar in readonly mode', () => {
-    const wrapper = mountEditor({ readonly: true, slots: true, fillSeries: true })
+    const wrapper = mountEditor({ spec: { slots: true, fillSeries: true }, readonly: true })
 
     expect(wrapper.find('.mint-plate-editor__toolbar').exists()).toBe(false)
   })
 })
 
 describe('PlateEditor — plate tabs', () => {
-  it('should emit update:activeRackId when a tab is clicked', async () => {
+  it('should emit update:activeRack when a tab is clicked', async () => {
     const wrapper = mountEditor()
 
     await tabs(wrapper)[1].trigger('click')
 
-    expect(wrapper.emitted('update:activeRackId')?.[0]).toEqual(['rack-2'])
+    expect(wrapper.emitted('update:activeRack')?.[0]).toEqual(['rack-2'])
   })
 
-  it('should show the second rack after its tab is clicked without a bound activeRackId', async () => {
+  it('should show the second rack after its tab is clicked without a bound activeRack', async () => {
     const wrapper = mountEditor()
 
     await tabs(wrapper)[1].trigger('click')
 
-    expect(plate(wrapper).props('format')).toBe(96)
+    expect(plate(wrapper).props('spec')?.format).toBe(96)
   })
 
   it('should keep showing the bound rack when the parent ignores a tab change', async () => {
-    const wrapper = mountEditor({ activeRackId: 'rack-1', 'onUpdate:activeRackId': () => {} })
+    const wrapper = mountEditor({ activeRack: 'rack-1', 'onUpdate:activeRack': () => {} })
 
     await tabs(wrapper)[1].trigger('click')
 
-    expect(plate(wrapper).props('format')).toBe(54)
+    expect(plate(wrapper).props('spec')?.format).toBe(54)
   })
 
-  it('should show the rack named by a new activeRackId', async () => {
-    const wrapper = mountEditor({ activeRackId: 'rack-1' })
+  it('should show the rack named by a new activeRack', async () => {
+    const wrapper = mountEditor({ activeRack: 'rack-1' })
 
-    await wrapper.setProps({ activeRackId: 'rack-2' })
+    await wrapper.setProps({ activeRack: 'rack-2' })
 
-    expect(plate(wrapper).props('format')).toBe(96)
+    expect(plate(wrapper).props('spec')?.format).toBe(96)
   })
 
   it('should render the well count as a bare mono count', () => {
@@ -185,7 +185,7 @@ describe('PlateEditor — plate tabs', () => {
   })
 
   it('should hide the close button at minRacks', () => {
-    const wrapper = mountEditor({ minRacks: 2 })
+    const wrapper = mountEditor({ spec: { minRacks: 2 } })
 
     expect(wrapper.find('.mint-plate-editor__tab-close').exists()).toBe(false)
   })
@@ -199,7 +199,7 @@ describe('PlateEditor — plate tabs', () => {
   })
 
   it('should hide the add button at maxRacks', () => {
-    const wrapper = mountEditor({ maxRacks: 2 })
+    const wrapper = mountEditor({ spec: { maxRacks: 2 } })
 
     expect(wrapper.find('.mint-plate-editor__add').exists()).toBe(false)
   })
@@ -213,7 +213,7 @@ describe('PlateEditor — plate tabs', () => {
   })
 
   it('should not reorder when reorder is off', async () => {
-    const wrapper = mountEditor({ reorder: false })
+    const wrapper = mountEditor({ spec: { reorder: false } })
 
     await tabs(wrapper)[0].trigger('keydown', { key: 'ArrowRight', altKey: true })
 
@@ -243,13 +243,13 @@ describe('PlateEditor — toolbar', () => {
   })
 
   it('should hide the format control when only one format is allowed', () => {
-    const wrapper = mountEditor({ formats: [54] })
+    const wrapper = mountEditor({ spec: { formats: [54] } })
 
     expect(wrapper.find('.mint-plate-editor__toolbar [role="radio"]').exists()).toBe(false)
   })
 
   it('should emit update:slot from a slot button', async () => {
-    const wrapper = mountEditor({ slots: true })
+    const wrapper = mountEditor({ spec: { slots: true } })
 
     await wrapper.findAll('.mint-plate-editor__slot')[2].trigger('click')
 
@@ -257,19 +257,19 @@ describe('PlateEditor — toolbar', () => {
   })
 
   it('should limit slot buttons to the listed slots', () => {
-    const wrapper = mountEditor({ slots: ['R', 'G'] })
+    const wrapper = mountEditor({ spec: { slots: ['R', 'G'] } })
 
     expect(wrapper.findAll('.mint-plate-editor__slot')).toHaveLength(2)
   })
 
   it('should mark the active slot as pressed', () => {
-    const wrapper = mountEditor({ slots: true })
+    const wrapper = mountEditor({ spec: { slots: true } })
 
     expect(wrapper.get('.mint-plate-editor__slot--active').text()).toBe('R')
   })
 
   it('should emit fill-series from its button', async () => {
-    const wrapper = mountEditor({ fillSeries: true })
+    const wrapper = mountEditor({ spec: { fillSeries: true } })
 
     await wrapper.get('[data-action="fill-series"]').trigger('click')
 
@@ -280,7 +280,7 @@ describe('PlateEditor — toolbar', () => {
     const racks = makeRacks()
     racks[0].format = 6
     racks[0].wells = Object.fromEntries(['A1', 'A2', 'A3', 'B1', 'B2', 'B3'].map(id => [id, { sampleType: 'sample' }]))
-    const wrapper = mountEditor({ modelValue: racks, fillSeries: true })
+    const wrapper = mountEditor({ spec: { fillSeries: true }, modelValue: racks })
 
     expect(wrapper.get('[data-action="fill-series"]').attributes('disabled')).toBeDefined()
   })
@@ -303,7 +303,7 @@ describe('PlateEditor — toolbar', () => {
   })
 
   it('should emit clear at once when clear is undo', async () => {
-    const wrapper = mountEditor({ clear: 'undo' })
+    const wrapper = mountEditor({ spec: { clear: 'undo' } })
 
     await wrapper.get('.mint-plate-editor__action--danger').trigger('click')
 
@@ -311,7 +311,7 @@ describe('PlateEditor — toolbar', () => {
   })
 
   it('should emit undo from the undo button', async () => {
-    const wrapper = mountEditor({ clear: 'undo', canUndo: true })
+    const wrapper = mountEditor({ spec: { clear: 'undo' }, canUndo: true })
 
     await wrapper.get('[aria-label="Undo"]').trigger('click')
 
@@ -319,7 +319,7 @@ describe('PlateEditor — toolbar', () => {
   })
 
   it('should emit undo on Ctrl+Z inside the editor', async () => {
-    const wrapper = mountEditor({ clear: 'undo', canUndo: true })
+    const wrapper = mountEditor({ spec: { clear: 'undo' }, canUndo: true })
 
     await wrapper.get('.mint-plate-editor').trigger('keydown', { key: 'z', ctrlKey: true })
 
@@ -327,13 +327,13 @@ describe('PlateEditor — toolbar', () => {
   })
 
   it('should hide the clear button when clear is false', () => {
-    const wrapper = mountEditor({ clear: false })
+    const wrapper = mountEditor({ spec: { clear: false } })
 
     expect(wrapper.find('.mint-plate-editor__action--danger').exists()).toBe(false)
   })
 
   it('should emit the chosen file from import', async () => {
-    const wrapper = mountEditor({ import: true })
+    const wrapper = mountEditor({ spec: { import: true } })
     const file = new File(['a,b'], 'plate.csv')
     const input = wrapper.get('input[type="file"]')
     Object.defineProperty(input.element, 'files', { value: [file] })
@@ -352,15 +352,15 @@ describe('PlateEditor — toolbar', () => {
 
 describe('PlateEditor — wells', () => {
   it('should switch the plate into drag mode from the Drag toggle', async () => {
-    const wrapper = mountEditor({ wellDrag: true })
+    const wrapper = mountEditor({ spec: { wellDrag: true } })
 
     await wrapper.get('[data-action="drag"]').trigger('click')
 
-    expect(plate(wrapper).props('selectionMode')).toBe('drag')
+    expect(plate(wrapper).props('spec')?.selectionMode).toBe('drag')
   })
 
   it('should show the hint prop in the footer until drag mode replaces it', async () => {
-    const wrapper = mountEditor({ wellDrag: true, hint: 'Drop samples here' })
+    const wrapper = mountEditor({ spec: { wellDrag: true }, hint: 'Drop samples here' })
 
     expect(wrapper.get('.mint-plate-editor__hint').text()).toBe('Drop samples here')
 
@@ -370,7 +370,7 @@ describe('PlateEditor — wells', () => {
   })
 
   it('should emit well-move with the active rack id', () => {
-    const wrapper = mountEditor({ wellDrag: true })
+    const wrapper = mountEditor({ spec: { wellDrag: true } })
 
     plate(wrapper).vm.$emit('well-move', 'A1', 'B2')
 
@@ -378,29 +378,29 @@ describe('PlateEditor — wells', () => {
   })
 
   it('should emit sample-drop for a JSON sample payload', () => {
-    const wrapper = mountEditor({ sampleDrop: true })
-    const parser = plate(wrapper).props('sampleDropParser') as (e: DragEvent) => unknown
+    const wrapper = mountEditor({ spec: { sampleDrop: true } })
+    const parser = plate(wrapper).props('spec')?.sampleDropParser as (e: DragEvent) => unknown
     const data = parser(dropEvent({ 'application/json': JSON.stringify({ id: 's1', sampleName: 'Liver' }) }))
 
     expect(data).toMatchObject({ id: 's1', sampleName: 'Liver' })
   })
 
   it('should reject a plain-text drop', () => {
-    const wrapper = mountEditor({ sampleDrop: true })
-    const parser = plate(wrapper).props('sampleDropParser') as (e: DragEvent) => unknown
+    const wrapper = mountEditor({ spec: { sampleDrop: true } })
+    const parser = plate(wrapper).props('spec')?.sampleDropParser as (e: DragEvent) => unknown
 
     expect(parser(dropEvent({ 'text/plain': 'Liver' }))).toBeNull()
   })
 
   it('should pass a custom drop parser through', () => {
     const custom = vi.fn(() => null)
-    const wrapper = mountEditor({ sampleDrop: custom })
+    const wrapper = mountEditor({ spec: { sampleDrop: custom } })
 
-    expect(plate(wrapper).props('sampleDropParser')).toBe(custom)
+    expect(plate(wrapper).props('spec')?.sampleDropParser).toBe(custom)
   })
 
   it('should forward sample-drop with the active rack id', () => {
-    const wrapper = mountEditor({ sampleDrop: true })
+    const wrapper = mountEditor({ spec: { sampleDrop: true } })
     const event = dropEvent({})
 
     plate(wrapper).vm.$emit('sample-drop', 'B1', { sampleName: 'Liver' }, event)
@@ -409,9 +409,9 @@ describe('PlateEditor — wells', () => {
   })
 
   it('should turn off the inspector when wellFields is false', () => {
-    const wrapper = mountEditor({ wellFields: false })
+    const wrapper = mountEditor({ spec: { wellFields: false } })
 
-    expect(plate(wrapper).props('editable')).toBe(false)
+    expect(plate(wrapper).props('spec')?.editable).toBe(false)
   })
 
   it('should pass rack-aware props to the #well-editor slot', async () => {
@@ -432,7 +432,7 @@ describe('PlateEditor — groups', () => {
   ]
 
   it('should show the selection bar once wells are selected', async () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
 
     plate(wrapper).vm.$emit('selection-change', ['A1', 'A2'])
     await nextTick()
@@ -441,7 +441,7 @@ describe('PlateEditor — groups', () => {
   })
 
   it('should emit assign with the chosen group', async () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
     plate(wrapper).vm.$emit('selection-change', ['A1', 'A2'])
     await nextTick()
 
@@ -451,7 +451,7 @@ describe('PlateEditor — groups', () => {
   })
 
   it('should emit assign without a group from the clear button', async () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -461,7 +461,7 @@ describe('PlateEditor — groups', () => {
   })
 
   it('should drop the selection bar on cancel', async () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -471,13 +471,13 @@ describe('PlateEditor — groups', () => {
   })
 
   it('should color wells by group id', () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
 
-    expect(plate(wrapper).props('sampleColors')).toEqual({ ctrl: 'var(--mint-sample-1)', trt: 'var(--mint-sample-3)' })
+    expect(plate(wrapper).props('spec')?.sampleColors).toEqual({ ctrl: 'var(--mint-sample-1)', trt: 'var(--mint-sample-3)' })
   })
 
   it('should emit selection-change', () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
 
     plate(wrapper).vm.$emit('selection-change', ['A1'])
 
@@ -502,7 +502,7 @@ describe('PlateEditor — groups and the inspector', () => {
   ]
 
   it('should keep a grouped well saved without a name', () => {
-    const wrapper = mountEditor({ modelValue: grouped(), groups })
+    const wrapper = mountEditor({ spec: { groups }, modelValue: grouped() })
 
     plate(wrapper).vm.$emit('well-edit', 'A1', { ...editData, wellId: 'A1', label: '', sampleType: 'sample' })
 
@@ -510,13 +510,13 @@ describe('PlateEditor — groups and the inspector', () => {
   })
 
   it('should keep the type field in the inspector when there are groups', () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
 
-    expect(plate(wrapper).props('editFields')).toContain('sampleType')
+    expect(plate(wrapper).props('spec')?.editFields).toContain('sampleType')
   })
 
   it('should clear the selection when the plate format changes', async () => {
-    const wrapper = mountEditor({ modelValue: grouped(), groups, formats: [96, 384] })
+    const wrapper = mountEditor({ spec: { groups, formats: [96, 384] }, modelValue: grouped() })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -526,7 +526,7 @@ describe('PlateEditor — groups and the inspector', () => {
   })
 
   it('should report the cleared selection when switching plates', async () => {
-    const wrapper = mountEditor({ modelValue: grouped(), groups })
+    const wrapper = mountEditor({ spec: { groups }, modelValue: grouped() })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -544,19 +544,19 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should show redo with history', () => {
-    const wrapper = mountEditor({ history: true })
+    const wrapper = mountEditor({ spec: { history: true } })
 
     expect(wrapper.find('[aria-label="Redo"]').exists()).toBe(true)
   })
 
   it('should disable undo when canUndo is false', () => {
-    const wrapper = mountEditor({ history: true })
+    const wrapper = mountEditor({ spec: { history: true } })
 
     expect(wrapper.get('[aria-label="Undo"]').attributes('disabled')).toBeDefined()
   })
 
   it('should keep focus in the editor when undo runs out of steps', async () => {
-    const wrapper = mountEditor({ history: true, canUndo: true }, { attachTo: document.body })
+    const wrapper = mountEditor({ spec: { history: true }, canUndo: true }, { attachTo: document.body })
     ;(wrapper.get('[aria-label="Undo"]').element as HTMLElement).focus()
 
     await wrapper.setProps({ canUndo: false })
@@ -566,7 +566,7 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should keep focus in the editor when redo runs out of steps', async () => {
-    const wrapper = mountEditor({ history: true, canRedo: true }, { attachTo: document.body })
+    const wrapper = mountEditor({ spec: { history: true }, canRedo: true }, { attachTo: document.body })
     ;(wrapper.get('[aria-label="Redo"]').element as HTMLElement).focus()
 
     await wrapper.setProps({ canRedo: false })
@@ -576,7 +576,7 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should emit redo from the redo button', async () => {
-    const wrapper = mountEditor({ history: true, canRedo: true })
+    const wrapper = mountEditor({ spec: { history: true }, canRedo: true })
 
     await wrapper.get('[aria-label="Redo"]').trigger('click')
 
@@ -584,7 +584,7 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should emit redo on Ctrl+Shift+Z inside the editor', async () => {
-    const wrapper = mountEditor({ history: true, canRedo: true })
+    const wrapper = mountEditor({ spec: { history: true }, canRedo: true })
 
     await wrapper.get('.mint-plate-editor').trigger('keydown', { key: 'Z', ctrlKey: true, shiftKey: true })
 
@@ -592,7 +592,7 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should leave Ctrl+Z in a text field to the field', async () => {
-    const wrapper = mountEditor({ history: true, canUndo: true }, {
+    const wrapper = mountEditor({ spec: { history: true }, canUndo: true }, {
       slots: { 'toolbar-extra': () => h('input', { class: 'field' }) },
     })
 
@@ -602,13 +602,13 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should label the menu Import / Export when both are on', () => {
-    const wrapper = mountEditor({ import: true, export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, export: ['csv'] } })
 
     expect(wrapper.get('[data-action="import-export"]').text()).toBe('Import / Export')
   })
 
   it('should emit export with the chosen format', () => {
-    const wrapper = mountEditor({ export: ['csv', 'json'] })
+    const wrapper = mountEditor({ spec: { export: ['csv', 'json'] } })
 
     wrapper.findComponent(ActionMenu).vm.$emit('select', { id: 'export:json', label: 'Export JSON' })
 
@@ -616,7 +616,7 @@ describe('PlateEditor — history and import / export (7a)', () => {
   })
 
   it('should open the file picker from the import menu item', () => {
-    const wrapper = mountEditor({ import: true, export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, export: ['csv'] } })
     const click = vi.spyOn(HTMLInputElement.prototype, 'click').mockImplementation(() => {})
 
     wrapper.findComponent(ActionMenu).vm.$emit('select', { id: 'import', label: 'Import file' })
@@ -637,33 +637,33 @@ describe('PlateEditor — paste import', () => {
   }
 
   it('should offer Paste in the menu when importMode is both', () => {
-    const wrapper = mountEditor({ import: true, importMode: 'both' })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'both' } })
 
     expect(wrapper.getComponent(ActionMenu).props('items').map((item: { id: string }) => item.id)).toEqual(['import', 'paste'])
   })
 
   it('should label the menu Import when only imports are offered', () => {
-    const wrapper = mountEditor({ import: true, importMode: 'both' })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'both' } })
 
     expect(wrapper.get('[data-action="import-export"]').text()).toBe('Import')
   })
 
   it('should drop the file picker when importMode is paste', () => {
-    const wrapper = mountEditor({ import: true, importMode: 'paste', export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'paste', export: ['csv'] } })
 
     expect(wrapper.find('input[type="file"]').exists()).toBe(false)
   })
 
   it('should open the paste dialog from the Paste menu item', async () => {
-    const wrapper = mountEditor({ import: true, importMode: 'paste', export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'paste', export: ['csv'] } })
 
     await openPaste(wrapper)
 
-    expect(pasteDialog(wrapper).props('modelValue')).toBe(true)
+    expect(pasteDialog(wrapper).props('open')).toBe(true)
   })
 
   it('should emit import-text with the pasted text on confirm', async () => {
-    const wrapper = mountEditor({ import: true, importMode: 'paste', export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'paste', export: ['csv'] } })
     await openPaste(wrapper)
     await wrapper.get('textarea').setValue('A1\tS001')
 
@@ -676,7 +676,7 @@ describe('PlateEditor — paste import', () => {
     const files: File[] = []
     // Typed as the file-only listener callers had before paste existed; it must still type-check.
     const wrapper = mount(PlateEditor, {
-      props: { modelValue: makeRacks(), import: true, importMode: 'both', onImport: (file: File) => { files.push(file) } },
+      props: { spec: { import: true, importMode: 'both' }, modelValue: makeRacks(), onImport: (file: File) => { files.push(file) } },
       global: { stubs: { teleport: true } },
     })
     await openPaste(wrapper)
@@ -688,7 +688,7 @@ describe('PlateEditor — paste import', () => {
   })
 
   it('should not emit import-text when the pasted text is blank', async () => {
-    const wrapper = mountEditor({ import: true, importMode: 'paste', export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'paste', export: ['csv'] } })
     await openPaste(wrapper)
     await wrapper.get('textarea').setValue('   ')
 
@@ -698,18 +698,18 @@ describe('PlateEditor — paste import', () => {
   })
 
   it('should close the paste dialog on confirm', async () => {
-    const wrapper = mountEditor({ import: true, importMode: 'paste', export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'paste', export: ['csv'] } })
     await openPaste(wrapper)
     await wrapper.get('textarea').setValue('A1')
 
     pasteDialog(wrapper).vm.$emit('confirm')
     await nextTick()
 
-    expect(pasteDialog(wrapper).props('modelValue')).toBe(false)
+    expect(pasteDialog(wrapper).props('open')).toBe(false)
   })
 
   it('should open an empty paste dialog when the previous paste was canceled', async () => {
-    const wrapper = mountEditor({ import: true, importMode: 'paste', export: ['csv'] })
+    const wrapper = mountEditor({ spec: { import: true, importMode: 'paste', export: ['csv'] } })
     await openPaste(wrapper)
     await wrapper.get('textarea').setValue('A1\tS001')
     pasteDialog(wrapper).vm.$emit('update:modelValue', false)
@@ -723,7 +723,7 @@ describe('PlateEditor — paste import', () => {
 
 describe('PlateEditor — Shift-click range', () => {
   it('should emit the range between the edited well and a Shift-clicked well', async () => {
-    const wrapper = mountEditor({ groups: [{ id: 'ctrl', name: 'Control' }] })
+    const wrapper = mountEditor({ spec: { groups: [{ id: 'ctrl', name: 'Control' }] } })
 
     await cell(wrapper, 'A1').trigger('click')
     await cell(wrapper, 'B2').trigger('click', { shiftKey: true })
@@ -732,10 +732,10 @@ describe('PlateEditor — Shift-click range', () => {
   })
 
   it('should not range from a well clicked on another rack', async () => {
-    const wrapper = mountEditor({ groups: [{ id: 'ctrl', name: 'Control' }], activeRackId: 'rack-1' })
+    const wrapper = mountEditor({ spec: { groups: [{ id: 'ctrl', name: 'Control' }] }, activeRack: 'rack-1' })
 
     await cell(wrapper, 'A1').trigger('click')
-    await wrapper.setProps({ activeRackId: 'rack-2' })
+    await wrapper.setProps({ activeRack: 'rack-2' })
     await cell(wrapper, 'C3').trigger('click', { shiftKey: true })
 
     expect(wrapper.emitted('selection-change')?.at(-1)).toEqual([['C3']])
@@ -746,13 +746,13 @@ describe('PlateEditor — compact wells (7a)', () => {
   it('should default to the xs well size', () => {
     const wrapper = mountEditor()
 
-    expect(plate(wrapper).props('size')).toBe('xs')
+    expect(plate(wrapper).props('spec')?.size).toBe('xs')
   })
 
   it('should hide well labels at the xs size', () => {
     const wrapper = mountEditor()
 
-    expect(plate(wrapper).props('showWellLabels')).toBe(false)
+    expect(plate(wrapper).props('spec')?.showWellLabels).toBe(false)
   })
 })
 
@@ -766,25 +766,25 @@ describe('PlateEditor — rail (7a)', () => {
   ]
 
   it('should collapse the rail in a narrow container', () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
 
     expect(wrapper.find('.mint-plate-editor__rail').exists()).toBe(false)
   })
 
   it('should show the rail in a wide container', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
 
     expect(wrapper.find('.mint-plate-editor__rail').exists()).toBe(true)
   })
 
   it('should count the wells of each group in the rail', async () => {
-    const wrapper = await mountWide({ modelValue: grouped(), groups })
+    const wrapper = await mountWide({ spec: { groups }, modelValue: grouped() })
 
     expect(wrapper.get('.mint-plate-editor__rail-row .mint-plate-editor__rail-count').text()).toBe('2')
   })
 
   it('should emit group-add from the New group row', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
 
     await wrapper.get('[data-action="group-add"]').trigger('click')
 
@@ -792,7 +792,7 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should hide New group when readonly', async () => {
-    const wrapper = await mountWide({ groups, readonly: true })
+    const wrapper = await mountWide({ spec: { groups }, readonly: true })
 
     expect(wrapper.find('[data-action="group-add"]').exists()).toBe(false)
   })
@@ -804,21 +804,21 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should move the legend from under the plate into the rail', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
 
-    expect(plate(wrapper).props('showLegend')).toBe(false)
+    expect(plate(wrapper).props('spec')?.showLegend).toBe(false)
   })
 
   it('should keep the legend under the plate in a narrow container', () => {
-    const wrapper = mountEditor({ groups })
+    const wrapper = mountEditor({ spec: { groups } })
 
-    expect(plate(wrapper).props('showLegend')).toBe(true)
+    expect(plate(wrapper).props('spec')?.showLegend).toBe(true)
   })
 
   it('should not open the popover inspector beside a rail', async () => {
     const wrapper = await mountWide()
 
-    expect(plate(wrapper).props('editable')).toBe(false)
+    expect(plate(wrapper).props('spec')?.editable).toBe(false)
   })
 
   it('should select only the clicked well on a plain click without groups', async () => {
@@ -840,7 +840,7 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should add a well to the selection on Cmd-click beside the rail with groups', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
     await cell(wrapper, 'A1').trigger('click')
 
     await cell(wrapper, 'A2').trigger('click', { metaKey: true })
@@ -849,9 +849,9 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should select wells by rectangle with groups', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
 
-    expect(plate(wrapper).props('selectionMode')).toBe('rectangle')
+    expect(plate(wrapper).props('spec')?.selectionMode).toBe('rectangle')
   })
 
   it('should show the inline inspector for one selected well', async () => {
@@ -937,7 +937,7 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should not select a well on a plain click beside the rail when wellFields is false and there are no groups', async () => {
-    const wrapper = await mountWide({ wellFields: false })
+    const wrapper = await mountWide({ spec: { wellFields: false } })
 
     await cell(wrapper, 'A1').trigger('click')
 
@@ -945,7 +945,7 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should keep the selection bar for several wells', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
 
     plate(wrapper).vm.$emit('selection-change', ['A1', 'A2'])
     await nextTick()
@@ -954,7 +954,7 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should offer the group bar for one selected well beside the rail', async () => {
-    const wrapper = await mountWide({ groups })
+    const wrapper = await mountWide({ spec: { groups } })
     plate(wrapper).vm.$emit('selection-change', ['D5'])
     await nextTick()
 
@@ -992,7 +992,7 @@ describe('PlateEditor — rail (7a)', () => {
   })
 
   it('should show the rail beside a 96-well plate at size fill', async () => {
-    const wrapper = await mountWide({ modelValue: grouped(), size: 'fill' })
+    const wrapper = await mountWide({ spec: { size: 'fill' }, modelValue: grouped() })
 
     expect(wrapper.find('.mint-plate-editor__rail').exists()).toBe(true)
   })
@@ -1012,7 +1012,7 @@ describe('PlateEditor — rail (7a)', () => {
 describe('PlateEditor — inspector marker (7a)', () => {
   it('should tint the rail inspector marker with the group color', async () => {
     const racks: Rack[] = [{ id: 'rack-1', name: 'P1', format: 96, slot: 'R', injectionVolume: 5, wells: { A1: { sampleType: 'sample', group: 'trt', state: 'filled' } } }]
-    const wrapper = await mountWide({ modelValue: racks, groups: [{ id: 'ctrl', name: 'Control' }, { id: 'trt', name: 'Treated' }] })
+    const wrapper = await mountWide({ spec: { groups: [{ id: 'ctrl', name: 'Control' }, { id: 'trt', name: 'Treated' }] }, modelValue: racks })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -1021,7 +1021,7 @@ describe('PlateEditor — inspector marker (7a)', () => {
 
   it('should name the group of the well in the rail inspector', async () => {
     const racks: Rack[] = [{ id: 'rack-1', name: 'P1', format: 96, slot: 'R', injectionVolume: 5, wells: { A1: { sampleType: 'sample', group: 'trt', state: 'filled' } } }]
-    const wrapper = await mountWide({ modelValue: racks, groups: [{ id: 'ctrl', name: 'Control' }, { id: 'trt', name: 'Treated' }] })
+    const wrapper = await mountWide({ spec: { groups: [{ id: 'ctrl', name: 'Control' }, { id: 'trt', name: 'Treated' }] }, modelValue: racks })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -1029,7 +1029,7 @@ describe('PlateEditor — inspector marker (7a)', () => {
   })
 
   it('should give the rail inspector the Type field when there are groups', async () => {
-    const wrapper = await mountWide({ groups: [{ id: 'ctrl', name: 'Control' }] })
+    const wrapper = await mountWide({ spec: { groups: [{ id: 'ctrl', name: 'Control' }] } })
     plate(wrapper).vm.$emit('selection-change', ['A1'])
     await nextTick()
 
@@ -1065,7 +1065,7 @@ describe('PlateEditor — modifier clicks in the popover mode', () => {
   })
 
   it('should not select a well on a plain click when wellFields is false and there are no groups', async () => {
-    const wrapper = mountEditor({ wellFields: false })
+    const wrapper = mountEditor({ spec: { wellFields: false } })
 
     await cell(wrapper, 'A1').trigger('click')
 
@@ -1073,7 +1073,7 @@ describe('PlateEditor — modifier clicks in the popover mode', () => {
   })
 
   it('should add a well to the selection on Ctrl-click with groups', async () => {
-    const wrapper = mountEditor({ groups: [{ id: 'ctrl', name: 'Control' }] })
+    const wrapper = mountEditor({ spec: { groups: [{ id: 'ctrl', name: 'Control' }] } })
     await cell(wrapper, 'A1').trigger('click', { ctrlKey: true })
 
     await cell(wrapper, 'A2').trigger('click', { ctrlKey: true })
@@ -1093,27 +1093,27 @@ describe('PlateEditor — designer options', () => {
   }]
 
   it('should use the clearConfirm title in the confirmation', () => {
-    const wrapper = mountEditor({ clearConfirm: { title: 'Unplace samples' } })
+    const wrapper = mountEditor({ spec: { clearConfirm: { title: 'Unplace samples' } } })
 
     expect(wrapper.getComponent(ConfirmDialog).props('title')).toBe('Unplace samples')
   })
 
   it('should use the clearConfirm message in the confirmation', () => {
-    const wrapper = mountEditor({ clearConfirm: { message: 'All 1 placed samples go back to the Sample List unplaced.' } })
+    const wrapper = mountEditor({ spec: { clearConfirm: { message: 'All 1 placed samples go back to the Sample List unplaced.' } } })
 
     expect(wrapper.getComponent(ConfirmDialog).props('message')).toBe('All 1 placed samples go back to the Sample List unplaced.')
   })
 
   it('should use the clearConfirm confirm label in the confirmation', () => {
-    const wrapper = mountEditor({ clearConfirm: { confirmLabel: 'Unplace all' } })
+    const wrapper = mountEditor({ spec: { clearConfirm: { confirmLabel: 'Unplace all' } } })
 
     expect(wrapper.getComponent(ConfirmDialog).props('confirmLabel')).toBe('Unplace all')
   })
 
-  it('should pass the clearConfirm variant to the confirmation', () => {
-    const wrapper = mountEditor({ clearConfirm: { variant: 'warning' } })
+  it('should pass the clearConfirm tone to the confirmation', () => {
+    const wrapper = mountEditor({ spec: { clearConfirm: { tone: 'warning' } } })
 
-    expect(wrapper.getComponent(ConfirmDialog).props('variant')).toBe('warning')
+    expect(wrapper.getComponent(ConfirmDialog).props('tone')).toBe('warning')
   })
 
   it('should keep the default clear message without clearConfirm', () => {
@@ -1123,13 +1123,13 @@ describe('PlateEditor — designer options', () => {
   })
 
   it('should keep fill-series enabled on a full plate when fillSeriesWhenFull is emit', () => {
-    const wrapper = mountEditor({ modelValue: fullRack(), fillSeries: true, fillSeriesWhenFull: 'emit' })
+    const wrapper = mountEditor({ spec: { fillSeries: true, fillSeriesWhenFull: 'emit' }, modelValue: fullRack() })
 
     expect(wrapper.get('[data-action="fill-series"]').attributes('disabled')).toBeUndefined()
   })
 
   it('should emit fill-series on a full plate when fillSeriesWhenFull is emit', async () => {
-    const wrapper = mountEditor({ modelValue: fullRack(), fillSeries: true, fillSeriesWhenFull: 'emit' })
+    const wrapper = mountEditor({ spec: { fillSeries: true, fillSeriesWhenFull: 'emit' }, modelValue: fullRack() })
 
     await wrapper.get('[data-action="fill-series"]').trigger('click')
 
@@ -1137,7 +1137,7 @@ describe('PlateEditor — designer options', () => {
   })
 
   it('should set the file input accept from importAccept', () => {
-    const wrapper = mountEditor({ import: true, importAccept: '.csv,text/csv' })
+    const wrapper = mountEditor({ spec: { import: true, importAccept: '.csv,text/csv' } })
 
     expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.csv,text/csv')
   })