@morscherlab/mint-sdk 1.4.13 → 1.5.0-beta.10

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

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { trackTopBarCompact } from '../../components/AppTopBar.compact'
+
+let resize: () => void = () => {}
+vi.stubGlobal('ResizeObserver', class {
+  constructor(callback: () => void) { resize = callback }
+  observe() {}
+  disconnect() {}
+})
+
+function size(el: Element, box: { width?: number; client?: number; scroll?: number }) {
+  if (box.width !== undefined) el.getBoundingClientRect = () => ({ width: box.width }) as DOMRect
+  if (box.client !== undefined) Object.defineProperty(el, 'clientWidth', { configurable: true, value: box.client })
+  if (box.scroll !== undefined) Object.defineProperty(el, 'scrollWidth', { configurable: true, value: box.scroll })
+}
+
+function topBar() {
+  const header = document.createElement('header')
+  header.innerHTML = `
+    <button class="mint-experiment-popover__trigger"><span class="mint-experiment-popover__trigger-text"></span></button>
+    <span class="mint-experiment-popover__save-label">Save</span>`
+  const [chip, text, label] = ['__trigger', '__trigger-text', '__save-label']
+    .map(part => header.querySelector(`.mint-experiment-popover${part}`)!)
+  size(label, { width: 40 })
+  return { header, chip, text }
+}
+
+afterEach(() => { resize = () => {} })
+
+describe('trackTopBarCompact', () => {
+  it('should compact when the chip is squeezed and expand once the bar has grown by the label width', () => {
+    const { header, chip, text } = topBar()
+    const compact = ref(false)
+    trackTopBarCompact(header, compact)
+
+    size(header, { client: 800 })
+    size(chip, { width: 150 })
+    size(text, { client: 60, scroll: 120 })
+    resize()
+    const squeezed = compact.value
+
+    size(header, { client: 830 })
+    resize()
+    const belowLabelWidth = compact.value
+
+    size(header, { client: 840 })
+    resize()
+
+    expect([squeezed, belowLabelWidth, compact.value]).toEqual([true, true, false])
+  })
+
+  it('should keep the labels when a short name leaves the chip narrow', () => {
+    const { header, chip, text } = topBar()
+    const compact = ref(false)
+    trackTopBarCompact(header, compact)
+
+    size(header, { client: 800 })
+    size(chip, { width: 150 })
+    size(text, { client: 60, scroll: 60 })
+    resize()
+
+    expect(compact.value).toBe(false)
+  })
+})

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

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import AppTopBar from '../../components/AppTopBar.vue'
+
+const reset = vi.fn()
+vi.mock('../../components/AppTopBar.compact', () => ({
+  trackTopBarCompact: () => ({ reset, stop: () => {} }),
+}))
+
+describe('AppTopBar compact reset', () => {
+  it('should re-measure when a job appears but not when its progress label changes', async () => {
+    const wrapper = mount(AppTopBar, {
+      props: { title: 'Test App', job: null },
+      global: { plugins: [createPinia()] },
+    })
+
+    await wrapper.setProps({ job: { status: 'running', label: 'Extracting 10 files' } })
+    const afterAppear = reset.mock.calls.length
+    await wrapper.setProps({ job: { status: 'running', label: 'Extracting 4 of 10 files' } })
+
+    expect([afterAppear, reset.mock.calls.length]).toEqual([1, 1])
+  })
+})

package/src/__tests__/components/AutoGroupModal.experimentLoad.test.ts

@@ -0,0 +1,58 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import SmartGroupFieldRecipe from '../../components/SmartGroupFieldRecipe.vue'
+
+const pending = vi.hoisted(() => new Map<string, (data: unknown) => void>())
+
+vi.mock('../../composables/useApi', () => ({
+  useApi: () => ({
+    get: (url: string) => new Promise(resolve => pending.set(url, data => resolve({ data }))),
+  }),
+}))
+
+const { default: AutoGroupModal } = await import('../../components/internal/AutoGroupModalInternal.vue')
+
+const design = (names: string[]) => ({
+  samples: names.map(sample_name => ({ sample_name, sample_type: 'sample', conditions: { Genotype: sample_name } })),
+})
+
+describe('AutoGroupModal experiment load', () => {
+  it('should ignore the response of an earlier open when the modal reopens on another experiment', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: { open: true, experimentId: 1 },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true, experimentId: 2 })
+    const recipe = () => wrapper.findComponent(SmartGroupFieldRecipe)
+
+    pending.get('/experiments/1/data')!(design(['O1', 'O2', 'O3']))
+    await flushPromises()
+    const afterOld = [recipe().props('loading'), recipe().props('headerCount')]
+    pending.get('/experiments/2/data')!(design(['N1', 'N2']))
+    await flushPromises()
+
+    expect({
+      afterOld,
+      afterNew: [recipe().props('loading'), recipe().props('headerCount')],
+    }).toEqual({ afterOld: [true, 0], afterNew: [false, 2] })
+  })
+
+  it('should stop loading and keep the pasted samples when the modal reopens without an experiment during a fetch', async () => {
+    const wrapper = mount(AutoGroupModal, {
+      props: { open: true, experimentId: 3 },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true, experimentId: undefined, samples: ['WT_1', 'WT_2', 'KO_1', 'KO_2'] })
+
+    pending.get('/experiments/3/data')!(design(['O1', 'O2', 'O3']))
+    await flushPromises()
+    const recipe = wrapper.findComponent(SmartGroupFieldRecipe)
+
+    const anatomy = (recipe.props('anatomy') as { text: string }[]).map(token => token.text)
+
+    expect([recipe.props('loading'), anatomy]).toEqual([false, ['WT', '1']])
+  })
+})

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

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import BaseModal from '../../components/BaseModal.vue'
 import type { ModalTab } from '../../types'
 
@@ -36,6 +36,8 @@ function mountModal(props: Record<string, unknown> = {}, slots: Record<string, s
   })
 }
 
+enableAutoUnmount(afterEach)
+
 describe('BaseModal', () => {
   describe('plain layout', () => {
     it('should not render a tab strip when layout is omitted', () => {
@@ -233,4 +235,33 @@ describe('BaseModal', () => {
       attached.unmount()
     })
   })
+
+  describe('scroll lock', () => {
+    afterEach(() => {
+      document.body.style.overflow = ''
+    })
+
+    it('should keep body scroll locked until the last nested modal closes when modals stack', async () => {
+      document.body.style.overflow = 'scroll'
+      const outer = mountModal()
+      const inner = mountModal({ title: 'Nested' })
+      await inner.setProps({ open: false })
+      expect(document.body.style.overflow).toBe('hidden')
+      await outer.setProps({ open: false })
+      expect(document.body.style.overflow).toBe('scroll')
+    })
+
+    it('should keep body scroll locked when a closed modal unmounts while another is open', async () => {
+      const open = mountModal({ open: false })
+      await open.setProps({ open: true })
+      const closed = mountModal({ open: false })
+      closed.unmount()
+      expect(document.body.style.overflow).toBe('hidden')
+    })
+
+    it('should lock body scroll when the modal mounts open', () => {
+      mountModal()
+      expect(document.body.style.overflow).toBe('hidden')
+    })
+  })
 })

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

@@ -7,8 +7,8 @@ import type { ButtonVariant, Tone } from '../../types'
 describe('ConfirmDialog', () => {
   it.each<[Tone, ButtonVariant]>([
     ['error', 'danger'],
-    ['warning', 'cta'],
-    ['cta', 'cta'],
+    ['warning', 'primary'],
+    ['cta', 'primary'],
     ['success', 'success'],
     ['info', 'primary'],
     ['neutral', 'primary'],

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

@@ -1,5 +1,6 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
+import ConfirmDialog from '../../components/ConfirmDialog.vue'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 
 function mountPopover(props = {}) {
@@ -279,4 +280,35 @@ describe('ExperimentPopover', () => {
 
     wrapper.unmount()
   })
+
+  it('should drop the success indicator when the parent clears saveSuccessMessage', async () => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', showSave: true })
+    const save = () => wrapper.find('.mint-experiment-popover__save')
+
+    await wrapper.setProps({ saveSuccessMessage: 'Saved' })
+    expect(save().classes()).toContain('mint-experiment-popover__save--success')
+    expect(save().attributes('title')).toBe('Saved')
+
+    await wrapper.setProps({ saveSuccessMessage: undefined, saveDisabled: true })
+    expect(save().classes()).not.toContain('mint-experiment-popover__save--success')
+    expect(save().classes()).toContain('mint-experiment-popover__save--disabled')
+    expect(save().attributes('disabled')).toBeDefined()
+
+    wrapper.unmount()
+  })
+
+  it.each([
+    { saveDisabled: true },
+    { saveLoading: true },
+  ])('should not emit save from the confirm dialog when %o', async (blocked) => {
+    const wrapper = mountPopover({ experimentName: 'Dose response run', showSave: true })
+
+    await wrapper.find('.mint-experiment-popover__save').trigger('click')
+    await wrapper.setProps(blocked)
+    wrapper.findComponent(ConfirmDialog).vm.$emit('confirm')
+
+    expect(wrapper.emitted('save')).toBeUndefined()
+
+    wrapper.unmount()
+  })
 })

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

@@ -174,7 +174,7 @@ describe('PluginWorkspaceView', () => {
     expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
       title: 'MS Uploader',
       subtitle: 'Import and visualize',
-      spec: { pills: pillNav, themeToggle: true, settings: {}, standaloneLabel: false },
+      spec: { pills: pillNav, settings: {}, standaloneLabel: false },
       pill: 'data',
     })
     expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({

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

@@ -52,13 +52,11 @@ describe('deprecation tags', () => {
 describe('root exports outside L1 and L2', () => {
   const ROOT_MODULES = ['composables/index.ts', 'components/index.ts', 'stores/index.ts', 'types/index.ts', 'apiErrors.ts', 'install.ts']
     .map(file => resolve(SRC, file))
-  const SUBPATHS = ['lab', 'shell', 'data', 'runtime']
-  const DEPRECATION = /^Import from '@morscherlab\/mint-sdk\/(\w+)'\. Removed in MINT 1\.5\.$/
 
-  function deprecatedRootNames(): ts.Symbol[] {
+  function otherRootNames(): string[] {
     const kept = new Set(ROOT_MODULES.flatMap(file => exportsOf(file).map(symbol => symbol.getName())))
     kept.add('MINTSdk').add('default')
-    return exportsOf(ROOT_ENTRY).filter(symbol => !kept.has(symbol.getName()))
+    return exportsOf(ROOT_ENTRY).map(symbol => symbol.getName()).filter(name => !kept.has(name))
   }
 
   it('should keep only the spec 3.3 L1 and L2 composable values in the composables barrel', () => {
@@ -72,19 +70,7 @@ describe('root exports outside L1 and L2', () => {
     ])
   })
 
-  it('should tag each other root name with the subpath that exports it untagged', () => {
-    const symbols = deprecatedRootNames()
-    const problems = symbols.flatMap((symbol) => {
-      const name = symbol.getName()
-      const tag = symbol.getJsDocTags(checker).find(item => item.name === 'deprecated')
-      const subpath = ts.displayPartsToString(tag?.text).match(DEPRECATION)?.[1]
-      if (!subpath || !SUBPATHS.includes(subpath)) return [`${name}: no deprecation tag naming a subpath`]
-      const target = exportsOf(resolve(SRC, `${subpath}.ts`)).find(item => item.getName() === name)
-      if (!target) return [`${name}: not exported from ./${subpath}`]
-      return isDeprecated(target) ? [`${name}: deprecated in ./${subpath}`] : []
-    })
-
-    expect(symbols.length).toBeGreaterThan(0)
-    expect(problems).toEqual([])
+  it('should export no root name outside the L1 and L2 modules', () => {
+    expect(otherRootNames()).toEqual([])
   })
 })

package/src/__tests__/composables/useJobCenter.test.ts

@@ -5,6 +5,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   combinePluginJobSources,
   useJobCenter,
+  type PluginJobCenterSource,
   type UseJobCenterOptions,
 } from '../../composables/useJobCenter'
 import type { JobStateInput, JobStatus, TopBarJob } from '../../types/jobs'
@@ -228,6 +229,26 @@ describe('useJobCenter', () => {
     wrapper.unmount()
   })
 
+  it('should refuse a second cancel when the source still reports the job running after the first cancel', async () => {
+    const sourceJobs = shallowRef([job('running', 'fit')])
+    const cancelJob = vi.fn(async () => {})
+    const { tray } = mountComposable({ source: { jobs: sourceJobs, cancel: cancelJob }, loadOnMount: false })
+
+    const first = await tray.cancelJob(tray.jobs.value[0]!)
+    const second = await tray.cancelJob(tray.jobs.value[0]!)
+    const pendingWhileRunning = tray.isPending(tray.jobs.value[0]!)
+    sourceJobs.value = [job('cancelled', 'fit')]
+    await nextTick()
+
+    expect({
+      first,
+      second,
+      calls: cancelJob.mock.calls.length,
+      pendingWhileRunning,
+      pendingAfter: tray.isPending(tray.jobs.value[0]!),
+    }).toEqual({ first: true, second: false, calls: 1, pendingWhileRunning: true, pendingAfter: false })
+  })
+
   it('keeps awaiting input jobs in the active group', () => {
     const { tray } = mountComposable({
       source: { jobs: [job('awaiting_input')] },
@@ -406,6 +427,20 @@ describe('useJobCenter top-bar chip', () => {
     expect(tray.topBarJob.value).toBeNull()
   })
 
+  it('should alert only later failures when a replacement source already lists failures', async () => {
+    const source = shallowRef<PluginJobCenterSource>({ jobs: [job('completed', 'c')] })
+    const { tray } = mountComposable({ source, loadOnMount: false })
+    const replacementJobs = shallowRef([job('failed', 'old')])
+
+    source.value = { jobs: replacementJobs }
+    await nextTick()
+    const replaced = tray.topBarJob.value
+    replacementJobs.value = [job('failed', 'old'), job('failed', 'new')]
+    await nextTick()
+
+    expect([replaced, tray.topBarJob.value]).toEqual([null, { status: 'failed', label: '1 failed' }])
+  })
+
   it('should alert only failures after the first job list when nothing was stored', async () => {
     const jobs = shallowRef<JobStateInput[]>([])
     const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })

package/src/__tests__/composables/useVersionedSave.test.ts

@@ -1,3 +1,4 @@
+import { flushPromises } from '@vue/test-utils'
 import { effectScope, ref } from 'vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { MintApiError } from '../../apiErrors'
@@ -95,18 +96,47 @@ describe('useVersionedSave', () => {
     scope.stop()
   })
 
-  it('should keep the conflict and the stale change when the reload brings no fresh record', async () => {
+  it.each([
+    ['the conflict', 'conflict', { version: 17 }],
+    ['the stale change', 'stale', { actors: ['Alice Chen'], fields: ['Notes'], at: '2026-10-23T10:00:00Z' }],
+  ] as const)('should keep %s when the reload brings no fresh record', async (_label, banner, expected) => {
     const { versioned, save, reload, scope } = setup()
-    save.mockRejectedValueOnce(conflictError({ version: 17 }))
-    await versioned.save()
-    emit({ actor_id: '7', fields: ['notes'] })
+    if (banner === 'conflict') {
+      save.mockRejectedValueOnce(conflictError({ version: 17 }))
+      await versioned.save()
+    } else {
+      emit({ actor_id: '7', fields: ['notes'], at: '2026-10-23T10:00:00Z' })
+    }
     const failure = new Error('Could not reload')
     reload.mockRejectedValueOnce(failure)
 
     await expect(versioned.reload()).rejects.toBe(failure)
 
-    expect(versioned.conflict.value).toEqual({ version: 17 })
-    expect(versioned.stale.value?.actors).toEqual(['Alice Chen'])
+    expect(versioned[banner].value).toEqual(expected)
+    scope.stop()
+  })
+
+  it('should show only the conflict when a save is refused after a write by someone else', async () => {
+    const { versioned, save, scope } = setup()
+    emit({ actor_id: '7', fields: ['notes'] })
+    save.mockRejectedValueOnce(conflictError({ version: 17 }))
+
+    await versioned.save()
+    emit({ actor_id: '9', fields: ['status'] })
+
+    expect([versioned.conflict.value, versioned.stale.value]).toEqual([{ version: 17 }, null])
+    scope.stop()
+  })
+
+  it('should send one request when save is called again while a save runs', async () => {
+    const pending: ((value: string) => void)[] = []
+    const { versioned, save, scope } = setup({ save: () => new Promise(resolve => { pending.push(resolve) }) })
+
+    const first = versioned.save()
+    const second = await Promise.race([versioned.save(), Promise.resolve('sent')])
+    pending.forEach(resolve => resolve('saved'))
+
+    expect([await first, second, save.mock.calls.length]).toEqual(['saved', undefined, 1])
     scope.stop()
   })
 
@@ -136,6 +166,41 @@ describe('useVersionedSave', () => {
     scope.stop()
   })
 
+  it('should ask for an automatic reload and show the stale change when the user starts editing during the refetch', async () => {
+    const { versioned, reload, dirty, scope } = setup()
+    dirty.value = false
+    let finish: () => void = () => {}
+    reload.mockImplementationOnce(() => new Promise<void>(resolve => { finish = resolve }))
+
+    emit({ actor_id: '7', fields: ['notes'], at: '2026-10-23T10:00:00Z' })
+    dirty.value = true
+    finish()
+    await flushPromises()
+
+    expect([reload.mock.calls[0], versioned.stale.value]).toEqual([
+      [true],
+      { actors: ['Alice Chen'], fields: ['Notes'], at: '2026-10-23T10:00:00Z' },
+    ])
+    scope.stop()
+  })
+
+  it('should not show the stale change when the topic changes during an automatic reload', async () => {
+    const { versioned, reload, dirty, topic, scope } = setup()
+    dirty.value = false
+    let finish: () => void = () => {}
+    reload.mockImplementationOnce(() => new Promise<void>(resolve => { finish = resolve }))
+
+    emit({ actor_id: '7', fields: ['notes'] })
+    dirty.value = true
+    topic.value = 'experiment:43'
+    await Promise.resolve()
+    finish()
+    await flushPromises()
+
+    expect(versioned.stale.value).toBeNull()
+    scope.stop()
+  })
+
   // A failed background refetch only keeps the clean form as it is; the host reports it.
   it('should not reject when the refetch for an event on a clean form fails', async () => {
     const { versioned, reload, dirty, scope } = setup()

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -470,9 +470,9 @@ describe('frontend docs catalog coverage', () => {
       'BaseButton',
       'PluginWorkspaceView',
       'DataFrame',
-      'useForm',
-      'useReagentSeries',
-      'ConcentrationValue',
+      'useExperiment',
+      'useRequest',
+      'UseExperimentReturn',
       'FormSectionSchema',
     ]))
   })

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

@@ -21,6 +21,11 @@ describe('menus and app shell styles', () => {
     expect(css('step-wizard.css')).not.toMatch(/\.mint-wizard__nav-btn/)
   })
 
+  // A max-content pill column made the grid wider than a phone, pushing theme and settings off the bar.
+  it('should let the pill column shrink when the two-row top bar is narrower than the pills', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__container--stackable\s*\{[^}]*grid-template-columns:\s*minmax\(0, max-content\) minmax\(0, 1fr\) auto;/)
+  })
+
   it('should pad the top bar to the 1.2 height (62px)', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.75rem 1rem;/)
   })

package/src/components/AppLayout.story.vue

@@ -52,7 +52,7 @@ const logScale = ref(false)
           >
             <template #topbar>
               <AppTopBar
-                :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
+                :spec="{ pills: pillNav, homePath: '' }"
                 title="My Plugin"
                 subtitle="Laboratory Analysis"
                 :pill="activeView"
@@ -113,7 +113,7 @@ const logScale = ref(false)
         >
           <template #topbar>
             <AppTopBar
-              :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
+              :spec="{ pills: pillNav, homePath: '' }"
               title="Plate Analyzer"
               subtitle="Dashboard"
               :pill="activeView"
@@ -170,7 +170,7 @@ const logScale = ref(false)
       <div style="height: 400px;">
         <AppLayout>
           <template #topbar>
-            <AppTopBar :spec="{ themeToggle: true, homePath: '' }" title="Simple Page" />
+            <AppTopBar :spec="{ homePath: '' }" title="Simple Page" />
           </template>
           <div style="padding: 2rem;">
             <p style="color: var(--text-muted, #94a3b8);">Layout without a sidebar, just topbar and content.</p>
@@ -254,7 +254,7 @@ const logScale = ref(false)
           <AppLayout :floating="true" sidebar-width="280px">
             <template #topbar>
               <AppTopBar
-                :spec="{ pills: pillNav, themeToggle: true, homePath: '' }"
+                :spec="{ pills: pillNav, homePath: '' }"
                 title="IC50 Calculator"
                 subtitle="Analysis"
                 :pill="activeView"
@@ -302,7 +302,7 @@ const logScale = ref(false)
           <AppLayout :floating="true">
             <template #topbar>
               <AppTopBar
-                :spec="{ themeToggle: true, homePath: '' }"
+                :spec="{ homePath: '' }"
                 title="Plate Analyzer"
                 subtitle="Dashboard"
               />

package/src/components/AppLayout.vue

@@ -21,7 +21,8 @@
  * </AppLayout>
  * ```
  */
-import { computed, ref } from 'vue'
+import { computed, provide, ref, useSlots } from 'vue'
+import { APP_LAYOUT_SIDEBAR_KEY } from '../composables/appLayoutSidebar'
 
 interface Props {
   /** Position of sidebar (left or right side of screen) */
@@ -57,6 +58,7 @@ const emit = defineEmits<{
   'update:sidebarOpen': [value: boolean]
 }>()
 
+const slots = useSlots()
 const internalSidebarOpen = ref(props.defaultSidebarOpen)
 const sidebarOpenModel = computed({
   get: () => props.sidebarOpen ?? internalSidebarOpen.value,
@@ -82,6 +84,16 @@ function toggleSidebar() {
   sidebarOpenModel.value = !sidebarOpenModel.value
 }
 
+// An AppTopBar in the topbar slot takes the drawer button; the floating one then hides (CSS :has).
+if (props.responsiveSidebar && slots.sidebar) {
+  provide(APP_LAYOUT_SIDEBAR_KEY, {
+    open: computed(() => sidebarOpenModel.value),
+    toggle: toggleSidebar,
+    openLabel: computed(() => props.sidebarToggleLabel),
+    closeLabel: computed(() => props.sidebarCloseLabel),
+  })
+}
+
 function closeSidebar() {
   sidebarOpenModel.value = false
 }

package/src/components/AppSidebar.vue

@@ -208,11 +208,11 @@ function railIconStyle(section: SidebarToolSection): Record<string, string> {
 }
 
 function badgeToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
+  return `mint-sidebar__rail-badge--${section.badgeTone ?? 'primary'}`
 }
 
 function tagToneClass(section: SidebarToolSection): string {
-  return `mint-sidebar__tag--${section.badgeTone ?? 'cta'}`
+  return `mint-sidebar__tag--${section.badgeTone ?? 'primary'}`
 }
 
 function actionClasses(action: SidebarToolSectionAction): string[] {

package/src/components/AppTopBar.compact.ts

@@ -0,0 +1,60 @@
+/**
+ * Decides when the top bar trades the Save and Jobs labels for icons.
+ *
+ * Labels go when the content no longer fits: the experiment chip is squeezed below
+ * `CHIP_MIN_PX` with its name cut, the plugin or page name is cut, or the pills or the context group overflow. They come back once the
+ * bar has grown by at least the width the labels took, so the bar never flips back and
+ * forth at one width. `reset()` re-measures after the content changes.
+ */
+import type { Ref } from 'vue'
+
+const CHIP_MIN_PX = 192
+const LABELS = '.mint-experiment-popover__save-label, .mint-topbar__job-label'
+/** Identity text that truncates when the left side is squeezed. */
+const IDENTITY_TEXT = '.mint-page-selector__plugin, .mint-page-selector__label, .mint-topbar__plugin-name, .mint-topbar-title, .mint-topbar__title-only'
+
+function overflows(el: Element | null): boolean {
+  return !!el && el.scrollWidth > el.clientWidth + 1
+}
+
+export function trackTopBarCompact(header: HTMLElement, compact: Ref<boolean>): { reset: () => void; stop: () => void } {
+  if (typeof ResizeObserver === 'undefined') return { reset: () => {}, stop: () => {} }
+  let expandAt = 0
+
+  function check(): void {
+    const width = header.clientWidth
+    if (compact.value) {
+      if (width >= expandAt) compact.value = false
+      return
+    }
+    // A short name leaves the chip narrow by itself: squeezed means narrow and truncated.
+    const chip = header.querySelector('.mint-experiment-popover__trigger')
+    const squeezed = (chip && chip.getBoundingClientRect().width < CHIP_MIN_PX
+      && overflows(chip.querySelector('.mint-experiment-popover__trigger-text')))
+      || [...header.querySelectorAll(IDENTITY_TEXT)].some(overflows)
+      || overflows(header.querySelector('.mint-topbar__center'))
+      || overflows(header.querySelector('.mint-topbar__context'))
+    if (!squeezed) return
+    const labelsWidth = [...header.querySelectorAll(LABELS)].reduce((sum, el) => sum + el.getBoundingClientRect().width, 0)
+    if (labelsWidth === 0) return
+    expandAt = width + labelsWidth
+    compact.value = true
+  }
+
+  const observer = new ResizeObserver(check)
+  // The groups mount and unmount with their content, so each reset observes them again.
+  function observe(): void {
+    observer.disconnect()
+    observer.observe(header)
+    for (const el of header.querySelectorAll('.mint-topbar__center, .mint-topbar__context')) observer.observe(el)
+  }
+  observe()
+  return {
+    reset: () => {
+      compact.value = false
+      expandAt = 0
+      requestAnimationFrame(observe)
+    },
+    stop: () => observer.disconnect(),
+  }
+}