@morscherlab/mint-sdk 1.4.0-beta.11 → 1.4.0-beta.13

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

@@ -12,6 +12,7 @@ import { defineControlModel, defineControls } from '../../composables/useControl
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
+import type { TopBarJob } from '../../types/jobs'
 
 // Mock the usePlatform composable
 vi.mock('../../composables/usePlatform', () => ({
@@ -908,7 +909,7 @@ describe('AppTopBar', () => {
       const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
       expect(imageIcons).toHaveLength(1)
       expect(imageIcons[0].attributes('src')).toBe(pngIcon)
-      expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
+      expect(wrapper.get('.mint-page-selector__item-hint').text()).toBe('Overview')
     })
   })
 
@@ -1237,6 +1238,26 @@ describe('AppTopBar', () => {
         expect(wrapper.find('.mint-topbar__plugin-name').exists()).toBe(false)
       })
 
+      it.each([
+        { case: 'integrated with display_name', integrated: true, plugin: { ...integratedPlugin, display_name: 'LC-MS Peak Review' }, props: { title: 'Ignored' }, seed: false, expected: 'LC-MS Peak Review' },
+        { case: 'integrated without display_name', integrated: true, plugin: integratedPlugin, props: {}, seed: false, expected: 'LC-MS Analysis' },
+        { case: 'standalone with a title', integrated: false, plugin: undefined, props: { title: 'Planner Dev' }, seed: true, expected: 'Planner Dev' },
+        { case: 'standalone seeded', integrated: false, plugin: undefined, props: {}, seed: true, expected: 'MS Planner' },
+        { case: 'standalone without a name', integrated: false, plugin: undefined, props: {}, seed: false, expected: null },
+      ])('should put the plugin name in the page selector crumb when $case', ({ integrated, plugin, props, seed, expected }) => {
+        mockPlatformCtx({ isIntegrated: integrated, plugin })
+        if (seed) providePluginIdentity({ plugin: { name: 'ms-planner', displayName: 'MS Planner' } })
+
+        try {
+          const wrapper = createWrapper({ ...props, pageSelector: pages, currentPageSelectorId: 'peaks' })
+
+          const name = wrapper.find('.mint-page-selector__plugin')
+          expect(name.exists() ? name.text() : null).toBe(expected)
+        } finally {
+          providePluginIdentity({ plugin: { name: '' } })
+        }
+      })
+
       it('should hide the plugin name when a page selector is shown', () => {
         mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
 
@@ -1483,4 +1504,157 @@ describe('AppTopBar', () => {
       expect(removeListener).toHaveBeenCalledWith('scroll', expect.any(Function), expect.objectContaining({ capture: true }))
     })
   })
+  describe('run slot', () => {
+    function mountRunSlot(job: TopBarJob | null | undefined, { experiment }: { experiment: boolean }) {
+      vi.mocked(usePlatform).mockReturnValueOnce({
+        integrated: computed(() => experiment),
+        isAdmin: computed(() => true),
+        can: () => true,
+        plugin: computed(() => undefined),
+        user: computed(() => undefined),
+        theme: computed(() => 'system' as const),
+        features: computed(() => undefined),
+      })
+      const appExperiment = {
+        popover: computed(() => ({ experimentName: 'Serine tracing', experimentCode: 'EXP-0142', showSave: true })),
+        selectorModal: computed(() => ({ open: false })),
+        openModal: vi.fn(),
+        closeModal: vi.fn(),
+        handleSave: vi.fn(),
+        handleDetach: vi.fn(),
+      } as unknown as AppExperimentState
+      return mount(AppTopBar, {
+        props: job === undefined ? { title: 'LEAF' } : { title: 'LEAF', job },
+        global: {
+          plugins: [createPinia()],
+          provide: { [APP_EXPERIMENT_KEY as symbol]: appExperiment },
+          stubs: { 'router-link': { template: '<a><slot /></a>' }, BaseModal: { template: '<div><slot /></div>' }, transition: false },
+        },
+      })
+    }
+
+    const running: TopBarJob = { status: 'running', label: 'Extracting', percent: 40 }
+
+    it.each([
+      ['no job prop, experiment', undefined, true, { popover: true, chip: false, idle: false, joined: false }],
+      ['idle, experiment', null, true, { popover: true, chip: true, idle: true, joined: false }],
+      ['running, experiment', running, true, { popover: true, chip: true, idle: false, joined: true }],
+      ['idle, standalone', null, false, { popover: false, chip: true, idle: true, joined: false }],
+      ['running, standalone', running, false, { popover: false, chip: true, idle: false, joined: true }],
+    ] as const)('should render the run slot for %s', async (_case, job, experiment, expected) => {
+      const wrapper = mountRunSlot(job, { experiment })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.find('.mint-topbar__job')
+      expect({
+        popover: wrapper.findComponent(ExperimentPopover).exists(),
+        chip: chip.exists(),
+        idle: chip.exists() && chip.classes('mint-topbar__job--idle'),
+        joined: wrapper.find('.mint-topbar__run-slot--joined').exists(),
+      }).toEqual(expected)
+    })
+
+    it.each([
+      [undefined, true],
+      [null, true],
+      [running, false],
+    ])('should pass showSave to the experiment chip when the job is %s', async (job, showSave) => {
+      const wrapper = mountRunSlot(job, { experiment: true })
+      await waitForAsyncComponents(wrapper)
+
+      expect(wrapper.findComponent(ExperimentPopover).props('showSave')).toBe(showSave)
+    })
+
+    it('should keep the slot joined until the job has left, then show the idle button', async () => {
+      const wrapper = mountRunSlot(running, { experiment: true })
+      await waitForAsyncComponents(wrapper)
+      const joined = () => wrapper.find('.mint-topbar__run-slot--joined').exists()
+
+      await wrapper.setProps({ job: null })
+      expect(joined()).toBe(true)
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job--idle').exists()).toBe(true))
+      expect(joined()).toBe(false)
+
+      await wrapper.setProps({ job: running })
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job--primary').exists()).toBe(true))
+      expect(joined()).toBe(true)
+
+      await wrapper.setProps({ job: undefined })
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job').exists()).toBe(false))
+      expect(joined()).toBe(false)
+    })
+
+    it('should join the slot when the job and the slot mount together', async () => {
+      const wrapper = mountRunSlot(undefined, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      await wrapper.setProps({ job: running })
+
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__run-slot--joined').exists()).toBe(true))
+    })
+
+    it.each([
+      [120, '100%', 'Extracting 100%'],
+      [-5, '0%', 'Extracting 0%'],
+    ])('should clamp percent %s to %s', async (percent, width, name) => {
+      const wrapper = mountRunSlot({ ...running, percent }, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain(`width: ${width}`)
+      expect(chip.attributes('aria-label')).toBe(name)
+    })
+
+    it.each([
+      [running, 'Job running'],
+      [{ status: 'awaiting_input', label: 'Decoding' } as TopBarJob, 'Job needs input'],
+      [{ status: 'failed', label: '1 failed' } as TopBarJob, 'Job failed'],
+      [null, ''],
+    ])('should announce the status of %o as %s', async (job, text) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const live = wrapper.get('.mint-topbar__job-status')
+      expect(live.attributes('aria-live')).toBe('polite')
+      expect(live.text()).toBe(text)
+    })
+
+    it.each([
+      ['queued', 'primary'],
+      ['running', 'primary'],
+      ['awaiting_input', 'warning'],
+      ['completed', 'success'],
+      ['failed', 'error'],
+      ['cancelled', 'neutral'],
+    ] as const)('should tone a %s job as %s', async (status, tone) => {
+      const wrapper = mountRunSlot({ status, label: 'Job' }, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      expect(wrapper.get('.mint-topbar__job').classes()).toContain(`mint-topbar__job--${tone}`)
+    })
+
+    it.each([
+      [running, 'Extracting 40%', true],
+      [{ status: 'completed', label: 'Saved to EXP-0142' } as TopBarJob, 'Saved to EXP-0142', false],
+    ])('should show only the status for %o and name it %s', async (job, name, bar) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect(chip.text()).toBe('')
+      expect(chip.attributes('aria-label')).toBe(name)
+      expect(chip.attributes('title')).toBe(name)
+      expect(chip.find('.mint-topbar__job-bar').exists()).toBe(bar)
+      if (bar) expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain('width: 40%')
+    })
+
+    it.each([null, running])('should emit job-click when the job control is %s', async (job) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      expect(wrapper.emitted('job-click')).toEqual([[]])
+    })
+  })
 })

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

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { describe, expect, it } from 'vitest'
 import AppTopBarPageSelectorInternal from '../../components/internal/AppTopBarPageSelectorInternal.vue'
 
@@ -24,26 +25,139 @@ describe('AppTopBarPageSelectorInternal', () => {
     expect(wrapper.emitted('select')).toEqual([[{ id: 'Results', label: 'Results' }]])
   })
 
-  it('omits page hints from the menu for compact scanning', async () => {
+  it('should show each page hint under its label when the page has one', async () => {
     const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: {
         currentPageId: 'downloads',
         pages: [
           { id: 'downloads', label: 'Downloads', hint: 'Paste links and queue downloads' },
-          { id: 'settings', label: 'Settings', hint: 'Credentials and destination' },
+          { id: 'settings', label: 'Settings' },
         ],
       },
     })
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
-      'Downloads',
-      'Settings',
+    const rows = wrapper.findAll('.mint-page-selector__item')
+    expect(rows.map(row => row.find('.mint-page-selector__item-hint').exists() ? row.get('.mint-page-selector__item-hint').text() : null)).toEqual([
+      'Paste links and queue downloads',
+      null,
     ])
-    expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
-    expect(wrapper.text()).not.toContain('Paste links')
-    expect(wrapper.text()).not.toContain('Credentials')
+  })
+
+  it.each([
+    { pluginName: 'LEAF', crumb: ['LEAF', '/'], title: 'LEAF pages' },
+    { pluginName: undefined, crumb: [], title: 'Pages' },
+  ])('should name the menu after the plugin when pluginName is $pluginName', async ({ pluginName, crumb, title }) => {
+    const wrapper = mount(AppTopBarPageSelectorInternal, {
+      props: { pluginName, currentPageId: 'Extract', pages: ['Extract', 'Analysis'] },
+    })
+
+    expect(wrapper.findAll('.mint-page-selector__plugin, .mint-page-selector__slash').map(el => el.text())).toEqual(crumb)
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.get('.mint-page-selector__menu-title').text()).toBe(title)
+    expect(wrapper.get('[role="menu"]').attributes('aria-label')).toBe(title)
+  })
+
+  it('should show number keys for the first nine pages only', async () => {
+    const pages = Array.from({ length: 10 }, (_, i) => `Page ${i + 1}`)
+    const wrapper = mount(AppTopBarPageSelectorInternal, { props: { pages } })
+
+    await wrapper.get('.mint-page-selector__trigger').trigger('click')
+
+    expect(wrapper.findAll('.mint-page-selector__item').map(row => row.find('.mint-page-selector__item-key').exists() ? row.get('.mint-page-selector__item-key').text() : null)).toEqual(
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', null],
+    )
+  })
+
+  describe('keyboard', () => {
+    const pages = [
+      { id: 'check', label: 'Quick check' },
+      { id: 'extract', label: 'Extract' },
+      { id: 'locked', label: 'Locked', disabled: true },
+      { id: 'analysis', label: 'Analysis' },
+    ]
+    const focusedLabel = () => document.activeElement?.querySelector('.mint-page-selector__item-label')?.textContent
+
+    function mountAttached() {
+      return mount(AppTopBarPageSelectorInternal, {
+        props: { pages, currentPageId: 'extract' },
+        attachTo: document.body,
+      })
+    }
+
+    it.each(['ArrowDown', 'Enter', ' '])('should open the menu on the current row when %j is pressed on the trigger', async (key) => {
+      const wrapper = mountAttached()
+
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key })
+      await nextTick()
+
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(true)
+      expect(focusedLabel()).toBe('Extract')
+      wrapper.unmount()
+    })
+
+    it('should move between enabled rows with arrows, Home and End', async () => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      const menu = wrapper.get('.mint-page-selector__menu')
+
+      const visited: Array<string | null | undefined> = []
+      for (const key of ['ArrowDown', 'ArrowDown', 'ArrowUp', 'Home', 'ArrowUp', 'End']) {
+        await menu.trigger('keydown', { key })
+        visited.push(focusedLabel())
+      }
+
+      expect(visited).toEqual(['Analysis', 'Quick check', 'Analysis', 'Quick check', 'Analysis', 'Analysis'])
+      wrapper.unmount()
+    })
+
+    it.each(['Enter', ' '])('should activate the focused row and refocus the trigger when %j is pressed', async (key) => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      const menu = wrapper.get('.mint-page-selector__menu')
+
+      await menu.trigger('keydown', { key: 'ArrowDown' })
+      await menu.trigger('keydown', { key })
+
+      expect(wrapper.emitted('select')).toEqual([[pages[3]]])
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('.mint-page-selector__trigger').element)
+      wrapper.unmount()
+    })
+
+    it.each([
+      { key: '4', emitted: [[pages[3]]], open: false },
+      { key: '3', emitted: undefined, open: true },
+      { key: '9', emitted: undefined, open: true },
+    ])('should handle digit $key as a jump to that page', async ({ key, emitted, open }) => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper.get('.mint-page-selector__menu').trigger('keydown', { key })
+
+      expect(wrapper.emitted('select')).toEqual(emitted)
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(open)
+      wrapper.unmount()
+    })
+
+    it('should close on Escape and return focus to the trigger', async () => {
+      const wrapper = mountAttached()
+      await wrapper.get('.mint-page-selector__trigger').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper.get('.mint-page-selector__menu').trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('.mint-page-selector__trigger').element)
+      wrapper.unmount()
+    })
   })
 
   it('closes linked page actions without emitting select', async () => {
@@ -171,6 +285,8 @@ describe('AppTopBarPageSelectorInternal', () => {
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item')[0].classes()).toContain('mint-page-selector__item--active')
+    const rows = wrapper.findAll('.mint-page-selector__item')
+    expect(rows[0].classes()).toContain('mint-page-selector__item--active')
+    expect(rows.map(row => row.attributes('aria-current'))).toEqual(['page', undefined])
   })
 })

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

@@ -64,9 +64,10 @@ interface ModalProps {
   currentExperimentId?: number | null
 }
 
-function mountModal(props: ModalProps) {
+function mountModal(props: ModalProps, slots: Record<string, string> = {}) {
   return mount(ExperimentSelectorModal, {
     props,
+    slots,
     global: {
       stubs: {
         BaseModal: {
@@ -202,6 +203,38 @@ describe('ExperimentSelectorModal', () => {
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 
+  it('should show the description slot above the experiment list', () => {
+    const wrapper = mountModal({ open: true }, { description: '<p class="why">Keep the result with its samples.</p>' })
+
+    const description = wrapper.get('.mint-experiment-selector__description')
+    expect(description.find('.why').text()).toBe('Keep the result with its samples.')
+    expect(description.element.compareDocumentPosition(wrapper.get('.mint-experiment-selector').element))
+      .toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+  })
+
+  it.each([
+    [null, false],
+    [7, true],
+  ])('should render the footer slot when the current experiment is %s, with the clear button %s', (currentExperimentId, hasClear) => {
+    const wrapper = mountModal({ open: true, currentExperimentId }, { footer: '<span class="extra">Skip</span>' })
+
+    const footer = wrapper.get('.mint-experiment-selector__footer')
+    expect(footer.find('.extra').exists()).toBe(true)
+    expect(footer.find('.mint-experiment-selector__clear-btn').exists()).toBe(hasClear)
+  })
+
+  it('should close without touching the store from the footer slot close()', async () => {
+    const store = useExperimentStore()
+    const wrapper = mountModal({ open: true }, {
+      footer: '<template #footer="{ close }"><button class="skip" @click="close">Skip</button></template>',
+    })
+
+    await wrapper.get('.skip').trigger('click')
+
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+    expect(store.current).toBeNull()
+  })
+
   it('should list each status with its count and check the current one', async () => {
     statusCounts.value = { ongoing: 3, planned: 1, completed: 0, cancelled: 2 }
     filters.status = 'ongoing'

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

@@ -728,10 +728,17 @@ describe('SettingsModal', () => {
       expect(useSettingsStore(pinia).theme).toBe('dark')
     })
 
-    it('should render a swatch strip for each palette when appearance is shown', () => {
+    it('should preview each palette with its own tokens when appearance is shown', () => {
       const wrapper = mountSettingsModal({ showAppearance: true })
 
-      expect(wrapper.findAll('.mint-settings-modal__palette')).toHaveLength(Object.keys(colorPalettes).length)
+      const strips = wrapper.findAll('.mint-settings-modal__swatches')
+      expect(strips.map((strip) => strip.attributes('data-palette'))).toEqual(Object.keys(colorPalettes))
+      expect(strips[0].findAll('.mint-settings-modal__swatch').map((swatch) => swatch.attributes('style'))).toEqual([
+        'background-color: var(--color-primary);',
+        'background-color: var(--color-primary-hover);',
+        'background-color: var(--color-primary-soft);',
+        'background-color: var(--color-primary-border);',
+      ])
     })
 
     it('should resize the density preview when the density changes', async () => {

package/src/__tests__/stores/settings.test.ts

@@ -2,7 +2,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 import {
-  paletteCssVariables,
   tableDensityToSize,
   tryUseSettingsStore,
   useSettingsStore,
@@ -54,6 +53,7 @@ describe('useSettingsStore', () => {
     document.documentElement.classList.remove('dark')
     document.documentElement.removeAttribute('style')
     delete document.documentElement.dataset.density
+    delete document.documentElement.dataset.palette
     mockMatchMedia(false)
   })
 
@@ -72,51 +72,51 @@ describe('useSettingsStore', () => {
     expect(settings.serverHost).toBe('127.0.0.1')
     expect(settings.serverPort).toBe(8001)
     expect(settings.theme).toBe('dark')
-    expect(settings.colorPalette).toBe('viridis')
+    expect(settings.colorPalette).toBe('purple')
     expect(settings.tableDensity).toBe('compact')
     expect(localStorage.getItem('mld-settings')).toBeNull()
     expect(JSON.parse(localStorage.getItem('mint-settings') || '{}')).toEqual(expect.objectContaining({
       serverHost: '127.0.0.1',
       serverPort: 8001,
       theme: 'dark',
-      colorPalette: 'viridis',
+      colorPalette: 'purple',
       tableDensity: 'compact',
     }))
   })
 
   describe('palette and density DOM sync', () => {
-    it('writes no palette overrides for the default palette', () => {
+    it('mirrors the stored palette onto html[data-palette] without inline overrides', () => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'ocean' }))
+
       const settings = useSettingsStore()
       settings.initialize()
 
-      expect(paletteCssVariables('default')).toEqual({})
+      expect(document.documentElement.dataset.palette).toBe('ocean')
       expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
     })
 
-    it('applies the stored palette hues to html on initialize', () => {
-      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'viridis' }))
-
+    it('updates html[data-palette] when the palette changes', async () => {
       const settings = useSettingsStore()
       settings.initialize()
+      expect(document.documentElement.dataset.palette).toBe('default')
 
-      const style = document.documentElement.style
-      expect(style.getPropertyValue('--color-primary')).toBe('hsl(280 84% 67%)')
-      expect(style.getPropertyValue('--color-primary-hover')).toBe('hsl(280 75% 59%)')
-      expect(style.getPropertyValue('--color-cta')).toBe('hsl(80 95% 53%)')
+      settings.colorPalette = 'forest'
+      await nextTick()
+      expect(document.documentElement.dataset.palette).toBe('forest')
     })
 
-    it('re-applies the overrides when the palette changes and clears them on default', async () => {
+    it.each([
+      ['viridis', 'purple'],
+      ['pastel', 'default'],
+      ['not-a-palette', 'default'],
+    ])('maps the stored palette %s onto %s', (stored, expected) => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: stored }))
+
       const settings = useSettingsStore()
       settings.initialize()
 
-      settings.colorPalette = 'pastel'
-      await nextTick()
-      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('hsl(200 84% 67%)')
-
-      settings.colorPalette = 'default'
-      await nextTick()
-      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
-      expect(document.documentElement.style.getPropertyValue('--color-primary-soft')).toBe('')
+      expect(settings.colorPalette).toBe(expected)
+      expect(document.documentElement.dataset.palette).toBe(expected)
     })
 
     it('mirrors the table density onto html[data-density]', async () => {

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -30,8 +30,14 @@ describe('menus and app shell styles', () => {
     expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.625rem;/)
   })
 
-  it('should size the page selector trigger to the 36px identity tile', () => {
-    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
+  // Design v2 option C: the page switcher sits in the crumb at the 32px top-bar control height.
+  it('should size the page selector trigger to the 32px top-bar control height', () => {
+    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2rem;/)
+  })
+
+  // A content-box menu measured 310px, and the platform's <a> rows (100% + padding) overflowed it.
+  it.each(['menu', 'item'])('should size the page selector %s as border-box', (part) => {
+    expect(css('app-page-selector.css')).toMatch(new RegExp(`\\.mint-page-selector__${part}\\s*\\{[^}]*box-sizing:\\s*border-box;`))
   })
 
   // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.

package/src/__tests__/styles/paletteTokens.test.ts

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { colorPalettes } from '../../stores/settings'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const variablesCss = readFileSync(join(resolve(here, '../..'), 'styles/variables.css'), 'utf-8')
+
+const ACCENT_TOKENS = [
+  '--color-primary',
+  '--color-primary-hover',
+  '--color-primary-pressed',
+  '--color-primary-soft',
+  '--color-primary-border',
+]
+const STATUS_TOKENS = ['--mint-success', '--mint-error', '--mint-warning', '--mint-warning-text']
+
+/** Declarations of every rule whose selector list has a selector that ends in `[data-palette="<key>"]`. */
+function paletteDeclarations(key: string, dark: boolean): string {
+  const attr = `[data-palette="${key}"]`
+  return [...variablesCss.matchAll(/([^{}]+)\{([^}]*)\}/g)]
+    .filter(([, selector]) => selector.split(',').some((s) => {
+      const one = s.trim()
+      return one.endsWith(attr) && one.startsWith('html.dark') === dark
+    }))
+    .map(([, , body]) => body)
+    .join('\n')
+}
+
+describe('accent palettes', () => {
+  it.each(Object.keys(colorPalettes).flatMap((key) => [[key, 'light'], [key, 'dark']]))(
+    'should define every accent token for the %s palette in %s mode',
+    (key, theme) => {
+      const body = paletteDeclarations(key, theme === 'dark')
+      for (const token of ACCENT_TOKENS) expect(body, `${key} ${theme} ${token}`).toMatch(new RegExp(`${token}\\s*:`))
+    },
+  )
+
+  it('should give the colour-blind palette Okabe-Ito status colours', () => {
+    const body = paletteDeclarations('colorblind', false)
+    for (const token of STATUS_TOKENS) expect(body, token).toMatch(new RegExp(`${token}\\s*:`))
+  })
+})