@morscherlab/mint-sdk 1.3.0-beta.1 → 1.3.0-beta.11

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

@@ -110,7 +110,7 @@ it('bounds recursive traversal and rejects truncated listings', async () => {
     mount_id, path,
     entries: [{ kind: 'directory', name: 'next', path: path ? `${path}/next` : 'next' }],
   }))
-  await expect(adapter.search('missing', { path: '', recursive: true })).rejects.toThrow('folder limit')
+  expect(await adapter.search('missing', { path: '', recursive: true })).toEqual({ nodes: [], truncated: true })
   expect(transport.browse).toHaveBeenCalledTimes(500)
   vi.mocked(transport.browse).mockResolvedValue({ mount_id: 'raw', path: '', entries: [], truncated: true })
   await expect(adapter.listRoot({ refresh: true })).rejects.toThrow('listing limit')
@@ -162,3 +162,94 @@ it('names the mount holding a path and nothing for a path it cannot decode', ()
   const adapter = createFilePickerAdapter(setup().transport)
   expect([adapter.mountOf!(identity('study/run')), adapter.mountOf!('not-json')]).toEqual([identity(), undefined])
 })
+
+function treeSetup() {
+  const study = { kind: 'directory' as const, name: 'study', path: 'study' }
+  const run = { kind: 'file' as const, name: 'run.raw', path: 'study/run.raw' }
+  const transport: FilePickerTransport = {
+    listMounts: vi.fn(async () => [{ id: 'raw', label: 'Raw files' }]),
+    browse: vi.fn(async ({ mount_id, path }) => ({ mount_id, path, entries: [] })),
+    tree: vi.fn(async ({ mount_id }) => ({
+      listings: [
+        { mount_id, path: '', entries: [study] },
+        { mount_id, path: 'study', entries: [run] },
+      ],
+      truncated: false,
+    })),
+    search: vi.fn(async ({ path }) => ({
+      entries: [study, run].filter((entry) => !path || entry.path.startsWith(`${path}/`)),
+      searched_directories: 2,
+      truncated: false,
+    })),
+  }
+  return { transport, adapter: createFilePickerAdapter(transport, { rootLocation: { mount_id: 'raw', path: '' } }) }
+}
+
+it('should serve a subfolder from the tree response when the transport has tree', async () => {
+  const { adapter, transport } = treeSetup()
+  await adapter.listRoot()
+  await adapter.listChildren(identity('study'))
+  expect(transport.tree).toHaveBeenCalledTimes(1)
+})
+
+it('should not call browse when the transport has tree', async () => {
+  const { adapter, transport } = treeSetup()
+  await adapter.listRoot()
+  expect(transport.browse).not.toHaveBeenCalled()
+})
+
+it('should map tree listings to their own parent folders', async () => {
+  const { adapter } = treeSetup()
+  await adapter.listRoot()
+  expect(await adapter.listChildren(identity('study'))).toMatchObject([
+    { path: identity('study/run.raw'), parentPath: identity('study'), kind: 'file' },
+  ])
+})
+
+it('should search on the server when the transport has search', async () => {
+  const { adapter, transport } = treeSetup()
+  await adapter.search('ru', { path: identity('study'), recursive: true })
+  expect(transport.search).toHaveBeenCalledWith({ mount_id: 'raw', path: 'study' }, 'ru', true, undefined)
+})
+
+it('should give server search results their parent folder', async () => {
+  const { adapter } = treeSetup()
+  expect(await adapter.search('ru', { path: '', recursive: true })).toMatchObject([
+    { path: identity('study'), parentPath: null },
+    { path: identity('study/run.raw'), parentPath: identity('study') },
+  ])
+})
+
+it('should return partial server results marked truncated when the server stops early', async () => {
+  const { adapter, transport } = treeSetup()
+  vi.mocked(transport.search!).mockResolvedValueOnce({
+    entries: [{ kind: 'file', name: 'run.raw', path: 'study/run.raw' }], searched_directories: 5000, truncated: true,
+  })
+  expect(await adapter.search('ru', { path: '', recursive: true })).toMatchObject({
+    nodes: [{ path: identity('study/run.raw') }], truncated: true,
+  })
+})
+
+it('should reject a search entry whose name is only a suffix of its last path segment', async () => {
+  const { adapter, transport } = treeSetup()
+  vi.mocked(transport.search!).mockResolvedValueOnce({
+    entries: [{ kind: 'file', name: 'b', path: 'study/ab' }], searched_directories: 1, truncated: false,
+  })
+  await expect(adapter.search('b', { path: '', recursive: true })).rejects.toThrow(/Invalid/)
+})
+
+it('should reject a server search entry outside the searched folder', async () => {
+  const { adapter, transport } = treeSetup()
+  vi.mocked(transport.search!).mockResolvedValueOnce({
+    entries: [{ kind: 'file', name: 'x.raw', path: 'other/x.raw' }], searched_directories: 1, truncated: false,
+  })
+  await expect(adapter.search('x', { path: identity('study'), recursive: true })).rejects.toThrow(/Invalid/)
+})
+
+it('should reject a nested entry from a search limited to this folder', async () => {
+  const { adapter, transport } = treeSetup()
+  vi.mocked(transport.search!).mockResolvedValueOnce({
+    entries: [{ kind: 'file', name: 'x.raw', path: 'study/private/x.raw' }], searched_directories: 1, truncated: false,
+  })
+  await expect(adapter.search('x', { path: identity('study'), recursive: false })).rejects.toThrow(/Invalid/)
+})

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

@@ -1,7 +1,7 @@
 import { afterEach, expect, it, vi } from 'vitest'
 import { effectScope, type EffectScope } from 'vue'
 import { usePickerNavigation } from '../../composables/filePicker/usePickerNavigation'
-import type { PickerAdapter, PickerNode } from '../../types/filePicker'
+import type { PickerAdapter, PickerNode, PickerSort } from '../../types/filePicker'
 
 const scopes: EffectScope[] = []
 afterEach(() => {
@@ -147,3 +147,63 @@ it('restarts prefetch after reopening even if old requests ignore cancellation',
   finish[4]!()
   await vi.advanceTimersByTimeAsync(100)
 })
+
+const dated = (kind: 'folder' | 'file', name: string, modifiedAt?: string): PickerNode =>
+  kind === 'folder'
+    ? { kind, path: name, name, modifiedAt }
+    : { kind, path: name, name, modifiedAt, format: 'raw' }
+const mixed = () => [
+  dated('file', 'b.raw', '2026-09-01T00:00:00Z'),
+  dated('folder', 'old', '2026-01-01T00:00:00Z'),
+  dated('file', 'a.raw', '2026-09-29T00:00:00Z'),
+  dated('folder', 'new', '2026-09-28T00:00:00Z'),
+  dated('file', 'undated.raw'),
+]
+async function sortedNames(sort: PickerSort | undefined) {
+  vi.useFakeTimers()
+  const adapter: PickerAdapter = {
+    listRoot: vi.fn(async () => mixed()),
+    listChildren: vi.fn(async () => []),
+    search: vi.fn(async () => []),
+  }
+  const scope = effectScope()
+  scopes.push(scope)
+  const nav = scope.run(() => usePickerNavigation(() => adapter, () => ({}), () => true, () => sort))!
+  await nav.load()
+  return nav.rows.value.map((row) => row.node.name)
+}
+
+it('should list folders first, newest first, when sorted by newest', async () => {
+  expect(await sortedNames('newest')).toEqual(['new', 'old', 'a.raw', 'b.raw', 'undated.raw'])
+})
+
+it('should list folders first, oldest first, when sorted by oldest', async () => {
+  expect(await sortedNames('oldest')).toEqual(['old', 'new', 'b.raw', 'a.raw', 'undated.raw'])
+})
+
+it('should list folders first by name when sorted by name', async () => {
+  expect(await sortedNames('name')).toEqual(['new', 'old', 'a.raw', 'b.raw', 'undated.raw'])
+})
+
+it('should list folders first by reverse name when sorted by name-desc', async () => {
+  expect(await sortedNames('name-desc')).toEqual(['old', 'new', 'undated.raw', 'b.raw', 'a.raw'])
+})
+
+it('should keep the adapter order when no sort is given', async () => {
+  expect(await sortedNames(undefined)).toEqual(['b.raw', 'old', 'a.raw', 'new', 'undated.raw'])
+})
+
+it('should show partial results and flag them when the adapter search is truncated', async () => {
+  const { nav, adapter } = setup([folder('a')])
+  vi.mocked(adapter.search).mockResolvedValueOnce({ nodes: [folder('a')], truncated: true })
+  await nav.load('a', true)
+  expect([nav.entries.value.length, nav.truncated.value]).toEqual([1, true])
+})
+
+it('should clear the truncated flag on the next plain listing', async () => {
+  const { nav, adapter } = setup([folder('a')])
+  vi.mocked(adapter.search).mockResolvedValueOnce({ nodes: [], truncated: true })
+  await nav.load('a', true)
+  await nav.load()
+  expect(nav.truncated.value).toBe(false)
+})

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

@@ -26,7 +26,10 @@ it('passes cancellation, marks offline mounts, and maps compound extensions', as
       ],
     })
     .mockResolvedValueOnce({
-      entries: [{ kind: 'file', path: 'run.mzML.gz', name: 'run.mzML.gz', size_bytes: 7 }],
+      listings: [{
+        mount_id: 'online', path: '',
+        entries: [{ kind: 'file', path: 'run.mzML.gz', name: 'run.mzML.gz', size_bytes: 7 }],
+      }],
     })
   const adapter = usePlatformFilePickerAdapter({ apiBaseUrl: '/api' })
   const signal = new AbortController().signal
@@ -42,7 +45,7 @@ it('passes cancellation, marks offline mounts, and maps compound extensions', as
   expect(get.mock.calls.every((call) => call[1].signal === signal)).toBe(true)
 })
 it('refuses truncated listings rather than returning a partial folder selection', async () => {
-  get.mockResolvedValue({ truncated: true, entries: [] })
+  get.mockResolvedValue({ listings: [{ mount_id: 'a', path: '', truncated: true, entries: [] }] })
   await expect(
     usePlatformFilePickerAdapter({ apiBaseUrl: '/api' }).listChildren(
       encodePlatformPickerPath('a'),
@@ -58,22 +61,22 @@ it('scopes shallow search to one level and recursive search skips offline mounts
             { id: 'b', label: 'NAS', available: false },
           ],
         }
-      : { entries: [{ kind: 'file', path: 'run.raw', name: 'run.raw', size_bytes: 1 }] },
+      : { listings: [{ mount_id: 'a', path: '', entries: [{ kind: 'file', path: 'run.raw', name: 'run.raw', size_bytes: 1 }] }] },
   )
   const adapter = usePlatformFilePickerAdapter({ apiBaseUrl: '/api' })
   expect(await adapter.search('run', { path: '', recursive: false })).toEqual([])
   expect(await adapter.search('run', { path: '', recursive: true })).toHaveLength(1)
-  expect(get.mock.calls.filter((call) => call[0].includes('/browse'))).toHaveLength(1)
+  expect(get.mock.calls.filter((call) => call[0].includes('/tree'))).toHaveLength(1)
 })
 it('forwards explicit refresh to mount browsing and supports a scoped root', async () => {
-  get.mockResolvedValue({ entries: [] })
+  get.mockResolvedValue({ listings: [{ mount_id: 'raw', path: 'study', entries: [] }] })
   const adapter = usePlatformFilePickerAdapter({
     apiBaseUrl: '/api', rootLocation: { mount_id: 'raw', path: 'study' },
   })
   const signal = new AbortController().signal
   await adapter.listRoot({ refresh: true, signal })
   expect(get).toHaveBeenCalledExactlyOnceWith(
-    '/filesystem/browse?mount_id=raw&path=study&refresh=true', { signal },
+    '/filesystem/tree?mount_id=raw&path=study&refresh=true', { signal },
   )
 })
 it('forwards a mount-list refresh so server directory snapshots are invalidated too', async () => {
@@ -83,3 +86,12 @@ it('forwards a mount-list refresh so server directory snapshots are invalidated
   await adapter.listRoot({ refresh: true, signal })
   expect(get).toHaveBeenCalledExactlyOnceWith('/filesystem/mounts?refresh=true', { signal })
 })
+
+it('should search a folder on the server with the query and scope', async () => {
+  get.mockResolvedValue({ entries: [], truncated: false })
+  await usePlatformFilePickerAdapter({ apiBaseUrl: '/api' })
+    .search('run', { path: encodePlatformPickerPath('raw', 'study'), recursive: false })
+  expect(get).toHaveBeenCalledExactlyOnceWith(
+    '/filesystem/search?mount_id=raw&path=study&q=run&recursive=false', { signal: undefined },
+  )
+})

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

@@ -60,7 +60,7 @@ function parseComponentExports(): string[] {
   const componentsDir = join(SDK_ROOT, 'src', 'components')
   const content = readFileSync(join(componentsDir, 'index.ts'), 'utf8')
   return [...content.matchAll(
-    /export\s+\{\s*default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/g,
+    /export\s+\{\s*(?:\/\*\*.*?\*\/\s*)?default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/g,
   )]
     .filter((match) => existsSync(join(componentsDir, `${match[2]}.vue`)))
     .map(match => match[1])
@@ -121,7 +121,7 @@ function parseDeprecatedComponentExports(): Record<string, string> {
     }
 
     const exportMatch = line.match(
-      /export\s+\{\s*default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/,
+      /export\s+\{\s*(?:\/\*\*.*?\*\/\s*)?default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/,
     )
     if (!exportMatch) continue
 

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

@@ -184,17 +184,30 @@ describe('SDK control refresh style rules', () => {
     expect(rule).toMatch(/flex-wrap:\s*wrap/)
   })
 
-  it('should keep the badge text off white when scanning well-plate.css (7a)', () => {
-    const css = stripComments(readFileSync(component('well-plate.css'), 'utf-8'))
-    const rule = /\.mint-well-plate__badge\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
-    expect(rule).toMatch(/color:\s*var\(--bg-card\)/)
+  it('should pad resource picker rows to the roomier two-column layout when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__row\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*10px 12px/)
   })
 
-  it('should pad resource picker rows so two text lines fit the 44px row when scanning resource-picker-list.css (8b)', () => {
-    // 16.25px title + 1px gap + 15px meta + 10px padding + 1px border = 43.25px, under min-height.
+  // Group bars and the list frame were inset by the modal body padding; the list now runs edge to edge.
+  it('should drop the modal body padding around the resource picker when scanning resource-picker-list.css', () => {
     const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
-    const rule = /\.mint-resource-picker__row\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
-    expect(rule).toMatch(/padding:\s*5px 12px/)
+    const rule = /\.mint-modal__body:has\(> \.mint-resource-picker\)\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*0/)
+  })
+
+  it('should pad resource picker group bars to the modal gutter when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__group\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*0 1\.25rem/)
+  })
+
+  // The list sat in a bordered card inside the modal card.
+  it('should draw no frame around the resource picker list when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__frame\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).not.toMatch(/(^|;)\s*border:/)
   })
 
   it('should paint the clear-selection link with primary ink when scanning experiment-selector-modal.css (8b)', () => {

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

@@ -21,16 +21,31 @@ describe('menus and app shell styles', () => {
     expect(css('step-wizard.css')).not.toMatch(/\.mint-wizard__nav-btn/)
   })
 
-  it('should pad the top bar to 52px around 32px controls (5a)', () => {
-    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.625rem 0\.75rem;/)
+  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;/)
   })
 
-  it('should shrink the plugin tile to 20px beside the static plugin identity (5a)', () => {
-    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__brand:has\(\+ \.mint-topbar__plugin-identity\) \.mint-plugin-icon--topbar\s*\{[^}]*width:\s*1\.25rem;/)
+  // 28px items + 3px track padding + 1px border on each side = the 36px top-bar control height.
+  it('should size pill nav items so the track matches the 36px top-bar controls', () => {
+    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.75rem;/)
+  })
+
+  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;/)
+  })
+
+  // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
+  it('should keep the plugin tile beside the static plugin identity (5a)', () => {
+    expect(css('app-top-bar.css')).not.toMatch(/:has\(\+ \.mint-topbar__plugin-identity\)/)
+  })
+
+  // A slotted 36px logo shrank to 32px wide but kept its height, drawing a 32x36 tile.
+  it('should fit slotted identity content inside the identity tile (5a)', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__identity > \*\s*\{[^}]*max-width:\s*100%;[^}]*max-height:\s*100%;/)
   })
 
   // 15px x 1.15 + 12px x 1.2 = 31.7px, so the title group fits the 32px control row.
-  it('should fit the top-bar title and subtitle inside the 32px control row (5a)', () => {
+  it('should fit the top-bar title and subtitle inside the control row (5a)', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar-title\s*\{[^}]*line-height:\s*1\.15;/)
   })
 

package/src/__tests__/templates/templatesDeprecation.test.ts

@@ -1,31 +1,78 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
+import { beforeAll, describe, expect, it } from 'vitest'
 import ts from 'typescript'
 
 const TEMPLATES_INDEX = resolve(dirname(fileURLToPath(import.meta.url)), '../../templates/index.ts')
+const COMPONENTS_INDEX = resolve(dirname(fileURLToPath(import.meta.url)), '../../components/index.ts')
+const COMPOSABLES_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '../../composables')
 
-// TypeScript ignores @deprecated on `export { ... } from` blocks; an import
-// site only shows the deprecation when the original declaration carries it.
-function undeprecatedTemplateValueExports(): string[] {
-  const program = ts.createProgram([TEMPLATES_INDEX], {
+// Composables removed in MINT 1.4 with the templates and sample grouping.
+const REMOVED_COMPOSABLE_FILES = [
+  'useBioTemplateComponents.ts',
+  'useBioTemplateControls.ts',
+  'useBioTemplatePackWorkspace.ts',
+  'useBioTemplatePresetWorkspace.ts',
+  'useBioTemplateWorkspace.ts',
+  'useTemplateCollection.ts',
+  'useExperimentSave.ts',
+  'useGroupAssignment.ts',
+].map(file => resolve(COMPOSABLES_DIR, file))
+
+// One program for every file: building one per file took longer than the test timeout on CI.
+let program: ts.Program
+let checker: ts.TypeChecker
+
+beforeAll(() => {
+  program = ts.createProgram([TEMPLATES_INDEX, COMPONENTS_INDEX, ...REMOVED_COMPOSABLE_FILES], {
     target: ts.ScriptTarget.ES2022,
     module: ts.ModuleKind.ESNext,
     moduleResolution: ts.ModuleResolutionKind.Bundler,
     noEmit: true,
   })
-  const checker = program.getTypeChecker()
-  const moduleSymbol = checker.getSymbolAtLocation(program.getSourceFile(TEMPLATES_INDEX)!)!
-  return checker
-    .getExportsOfModule(moduleSymbol)
+  checker = program.getTypeChecker()
+}, 60_000)
+
+function exportsOf(file: string): ts.Symbol[] {
+  return checker.getExportsOfModule(checker.getSymbolAtLocation(program.getSourceFile(file)!)!)
+}
+
+function isDeprecated(symbol: ts.Symbol): boolean {
+  return symbol.getJsDocTags(checker).some(tag => tag.name === 'deprecated')
+}
+
+// TypeScript ignores @deprecated on `export { ... } from` blocks; an import
+// site only shows the deprecation when the original declaration carries it.
+function undeprecatedValueExports(file: string): string[] {
+  return exportsOf(file)
     .map(symbol => (symbol.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(symbol) : symbol))
     .filter(symbol => symbol.flags & ts.SymbolFlags.Value)
-    .filter(symbol => !symbol.getJsDocTags(checker).some(tag => tag.name === 'deprecated'))
+    .filter(symbol => !isDeprecated(symbol))
     .map(symbol => symbol.getName())
 }
 
 describe('templates deprecation', () => {
+  it('should expose deprecated component tags to TypeScript consumers', () => {
+    const names = ['BioTemplateRenderer', 'SmartGroupModal', 'DoseDesignWorkspaceView']
+    const tagged = exportsOf(COMPONENTS_INDEX).filter(isDeprecated).map(symbol => symbol.getName())
+
+    expect(names.filter(name => !tagged.includes(name))).toEqual([])
+  })
+
+  it('should not tag components that stay public in MINT 1.4', () => {
+    const names = ['SampleSelector', 'SequenceProgressBar', 'InstrumentStateBadge']
+    const tagged = exportsOf(COMPONENTS_INDEX).filter(isDeprecated).map(symbol => symbol.getName())
+
+    expect(names.filter(name => tagged.includes(name))).toEqual([])
+  })
+
   it('should tag every template value export when the templates move out in MINT 1.4', () => {
-    expect(undeprecatedTemplateValueExports()).toEqual([])
+    expect(undeprecatedValueExports(TEMPLATES_INDEX)).toEqual([])
+  })
+
+  it('should tag every value export of the template and grouping composables when they are removed in MINT 1.4', () => {
+    const untagged = REMOVED_COMPOSABLE_FILES.flatMap(undeprecatedValueExports)
+
+    expect(untagged).toEqual([])
   })
 })

package/src/components/ActionMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Compact overflow actions with an IconButton trigger and a viewport-safe teleported menu. */
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { Ellipsis } from 'lucide-vue-next'
+import { Check, Ellipsis } from 'lucide-vue-next'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
@@ -167,10 +167,18 @@ watch(isOpen, async (opened) => {
           v-else
           type="button"
           :class="['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]"
-          role="menuitem"
+          :role="item.checked === undefined ? 'menuitem' : 'menuitemradio'"
+          :aria-checked="item.checked"
           :disabled="item.disabled"
           @click="handleSelect(item)"
         >
+          <Check
+            v-if="item.checked !== undefined"
+            class="mint-action-menu__check"
+            :class="{ 'mint-action-menu__check--off': !item.checked }"
+            :size="14"
+            aria-hidden="true"
+          />
           {{ item.label }}
         </button>
       </template>

package/src/components/AppTopBar.vue

@@ -144,8 +144,11 @@ const hasPlatformPageSelector = computed(() =>
   props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
 )
 const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
-/** Integrated plugins show their name + version as a static identity; it stands in for the title. */
-const identityName = computed(() => (isIntegrated.value ? plugin.value?.name : undefined))
+/** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
+// Platforms before 1.3 send no display_name.
+const identityName = computed(() =>
+  isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
+)
 const hasPillNav = computed(() => !!props.pillNav?.length)
 const hasAccountMenu = computed(() => !!props.accountMenu?.length)
 const hasTitleGroup = computed(
@@ -304,9 +307,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
       <!-- Left: static plugin identity (not a control) -->
       <span v-if="identityName" class="mint-topbar__plugin-identity">
         <span class="mint-topbar__plugin-name">{{ identityName }}</span>
-        <span v-if="plugin?.version" class="mint-topbar__plugin-version">v{{ plugin.version }}</span>
       </span>
-      <span v-if="identityName && hasPageSelector" class="mint-topbar__divider" aria-hidden="true" />
 
       <!-- Left: page selector -->
       <AppTopBarPageSelectorInternal
@@ -443,6 +444,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
     :title="settingsConfig?.title"
     :tabs="normalizedSettingsTabs"
     :show-appearance="settingsConfig?.showAppearance ?? true"
+    :appearance-first="settingsConfig?.appearanceFirst"
     :size="settingsConfig?.size"
     :layout="settingsConfig?.layout"
     :schema="settingsConfig?.schema"

package/src/components/EmptyState.vue

@@ -56,7 +56,9 @@ const defaultIconPaths = [
     <div class="mint-empty-state__body">
       <h3 v-if="title" class="mint-empty-state__title">{{ title }}</h3>
       <p v-if="description" class="mint-empty-state__description">{{ description }}</p>
-      <slot />
+      <div v-if="$slots.default" class="mint-empty-state__content">
+        <slot />
+      </div>
     </div>
     <div v-if="actionLabel" class="mint-empty-state__action">
       <BaseButton variant="secondary" @click="emit('action')">

package/src/components/ExperimentSelectorModal.vue

@@ -14,6 +14,7 @@ import { useExperimentStore } from '../stores/experiment'
 import {
   formatExperimentDate,
   formatExperimentStatus,
+  getExperimentStatusVariant,
   EXPERIMENT_STATUS_OPTIONS,
   DATE_PRESET_OPTIONS,
   SORT_OPTIONS,
@@ -105,8 +106,10 @@ function describe(experiment: ExperimentSummary) {
     meta: [
       ...(groupToggle.value ? [] : [experiment.project_name || experiment.project || '']),
       owner ? [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.username : '',
-      formatExperimentStatus(experiment.status),
     ].filter(Boolean),
+    status: experiment.status
+      ? { label: formatExperimentStatus(experiment.status), variant: getExperimentStatusVariant(experiment.status) }
+      : undefined,
     date: formatExperimentDate(experiment.created_at),
   }
 }

package/src/components/FilePicker.vue

@@ -12,6 +12,7 @@ import { computed, ref, useTemplateRef } from 'vue'
 import BaseModal from './BaseModal.vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
+import ActionMenu from './ActionMenu.vue'
 import SegmentedControl from './SegmentedControl.vue'
 import FileUploader from './FileUploader.vue'
 import FilePickerListInternal from './internal/FilePickerListInternal.vue'
@@ -24,6 +25,7 @@ import type {
   PickerNode,
   PickerSelection,
   PickerSelectionMode,
+  PickerSort,
   PickerSource,
   PickerView,
 } from '../types/filePicker'
@@ -39,6 +41,8 @@ interface Props {
   title?: string
   /** `list` shows one folder at a time; `tree` adds disclosure triangles. */
   view?: PickerView
+  /** Row order on each open; the user can change it from the path bar until closing. */
+  defaultSort?: PickerSort
   /** Host-owned visibility/selection filter; backend must still enforce access. */
   systemFilter?: (node: PickerNode, source: PickerSource) => boolean
 }
@@ -50,6 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
   initialSelection: null,
   title: 'Choose data',
   view: 'list',
+  defaultSort: 'newest',
 })
 const emit = defineEmits<{
   'update:open': [open: boolean]
@@ -68,6 +73,7 @@ const {
   source,
   query,
   recursive,
+  sort,
   skipBlanks,
   reviewing,
   nav,
@@ -109,6 +115,19 @@ const sourceLabel = computed(() => {
   }
   return mounts.value.find((item) => item.path === props.adapter.mountOf?.(node.path))?.name ?? sourceNames.server
 })
+const SORT_LABELS: Record<PickerSort, string> = {
+  newest: 'Newest first',
+  oldest: 'Oldest first',
+  name: 'Name A–Z',
+  'name-desc': 'Name Z–A',
+}
+const sortItems = computed(() =>
+  (Object.keys(SORT_LABELS) as PickerSort[]).map((id) => ({
+    id,
+    label: SORT_LABELS[id],
+    checked: sort.value === id,
+  })),
+)
 const accepts = computed(() =>
   (capability.value?.formats ?? []).map((format) => `.${format.replace(/^\./, '')}`).join(' '),
 )
@@ -198,6 +217,28 @@ const summary = computed(() => {
           </template>
         </nav>
         <span v-if="accepts" class="mint-picker__accepts">Accepts {{ accepts }}</span>
+        <ActionMenu
+          label="Sort"
+          :items="sortItems"
+          @select="sort = $event.id as PickerSort"
+        >
+          <template #trigger="{ open: menuOpen, toggle, keydown }">
+            <button
+              type="button"
+              class="mint-picker__sort"
+              aria-haspopup="menu"
+              :aria-expanded="menuOpen"
+              :aria-label="`Sort: ${SORT_LABELS[sort]}`"
+              @click="toggle"
+              @keydown="keydown"
+            >
+              {{ SORT_LABELS[sort] }}
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                <path d="M4 6l4 4 4-4" />
+              </svg>
+            </button>
+          </template>
+        </ActionMenu>
         <button
           type="button"
           class="mint-picker__scope"
@@ -255,6 +296,7 @@ const summary = computed(() => {
             :loading="loading"
             :error="error"
             :query="query"
+            :truncated="nav.truncated.value"
             :mode="selectionMode"
             :selected="selection.selected"
             :selectable="selection.selectable"