@morscherlab/mint-sdk 1.3.0-beta.5 → 1.3.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.3.0-beta.5",
+  "version": "1.3.0-beta.7",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -1211,6 +1211,14 @@ describe('AppTopBar', () => {
         expect(wrapper.get('.mint-topbar__plugin-name').text()).toBe('LC-MS Analysis')
       })
 
+      it('should render the platform display name when integrated', () => {
+        mockPlatformCtx({ isIntegrated: true, plugin: { ...integratedPlugin, display_name: 'LC-MS Peak Review' } })
+
+        const wrapper = createWrapper()
+
+        expect(wrapper.get('.mint-topbar__plugin-name').text()).toBe('LC-MS Peak Review')
+      })
+
       it('should not render the plugin version when integrated', () => {
         mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
 

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

@@ -129,25 +129,32 @@ describe('ExperimentSelectorModal', () => {
     expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
   })
 
-  it('should lead the row title with the experiment code in mono', () => {
+  it('should show the experiment code as a pill on the second line', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true })
 
     expect(wrapper.get('.mint-resource-picker__code').text()).toBe('EXP-007')
   })
 
-  it('should state the status as text on the second row line', () => {
+  it('should state the status as text in the right-hand column', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true })
 
-    expect(wrapper.get('.mint-resource-picker__meta').text()).toContain('Ongoing')
+    expect(wrapper.get('.mint-resource-picker__aside').text()).toContain('Ongoing')
   })
 
-  it('should check the current experiment row', () => {
+  it('should tint the status with the experiment status variant', () => {
+    experiments.value = [experiment()]
+    const wrapper = mountModal({ modelValue: true })
+
+    expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--primary')
+  })
+
+  it('should fill the current experiment row', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
 
-    expect(wrapper.find('.mint-resource-picker__check').exists()).toBe(true)
+    expect(wrapper.find('.mint-resource-picker__row--selected').exists()).toBe(true)
   })
 
   it('clears the shared store from the clear-selection footer', async () => {

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

@@ -3,16 +3,13 @@ import { describe, expect, it } from 'vitest'
 import FileUploader from '../../components/FileUploader.vue'
 
 describe('FileUploader', () => {
-  it('should prompt to release with the dragged file count when files are dragged over', async () => {
-    const wrapper = mount(FileUploader, { props: { multiple: true } })
-    await wrapper.get('.mint-file-uploader__dropzone').trigger('dragover', {
-      dataTransfer: { items: { length: 3 } },
-    })
-    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Release to add 3 files')
+  it('should name the accepted formats in the prompt when accept is set', () => {
+    const wrapper = mount(FileUploader, { props: { accept: '.raw, .mzML' } })
+    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Drop RAW, MZML or click')
   })
 
-  it('should list accepted formats as written when accept and maxSize are set', () => {
-    const wrapper = mount(FileUploader, { props: { accept: '.raw, .mzML', maxSize: 2 * 1024 ** 3 } })
-    expect(wrapper.get('.mint-file-uploader__formats').text()).toBe('.raw .mzML · max 2.0 GB')
+  it('should prompt for any file when accept is not set', () => {
+    const wrapper = mount(FileUploader)
+    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Drop any file or click')
   })
 })

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

@@ -40,8 +40,27 @@ describe('ResourcePickerListInternal', () => {
     expect(setup().get('.mint-resource-picker__code').text()).toBe('EXP-042')
   })
 
-  it('should join the meta and date on the second line', () => {
-    expect(setup().get('.mint-resource-picker__meta').text()).toBe('Zhang · 09-24')
+  it('should render the code as the shared gray code pill', () => {
+    expect(setup().get('.mint-resource-picker__code').classes()).toContain('mint-exp-code')
+  })
+
+  it('should tint the status by its variant', () => {
+    const wrapper = setup({
+      describe: (item: unknown) => ({ title: (item as Item).name, status: { label: 'Completed', variant: 'success' } }),
+    })
+    expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--success')
+  })
+
+  it('should keep the title line to the title alone', () => {
+    expect(setup().get('.mint-resource-picker__title').text()).toBe('Liver microsome stability')
+  })
+
+  it('should lead the second line with the code and meta', () => {
+    expect(setup().get('.mint-resource-picker__meta').text()).toBe('EXP-042Zhang')
+  })
+
+  it('should put the date in the right-hand column', () => {
+    expect(setup().get('.mint-resource-picker__aside .mint-resource-picker__date').text()).toBe('09-24')
   })
 
   it('should mark the selected row', () => {
@@ -49,8 +68,8 @@ describe('ResourcePickerListInternal', () => {
     expect(wrapper.findAll('[role="option"]')[1]!.attributes('aria-selected')).toBe('true')
   })
 
-  it('should draw a trailing check on the selected row only', () => {
-    expect(setup({ selectedKey: 2 }).findAll('.mint-resource-picker__check')).toHaveLength(1)
+  it('should fill the selected row only', () => {
+    expect(setup({ selectedKey: 2 }).findAll('.mint-resource-picker__row--selected')).toHaveLength(1)
   })
 
   it('should emit select when a row is clicked', async () => {

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

@@ -540,6 +540,28 @@ describe('SettingsModal', () => {
       expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Plugin', 'Personal'])
     })
 
+    it('should list and open Appearance first when appearanceFirst is set', () => {
+      const wrapper = mountSettingsModal({
+        tabs: [{ id: 'plugins', label: 'Plugins' }],
+        showAppearance: true,
+        appearanceFirst: true,
+        layout: 'vertical',
+      })
+
+      expect(wrapper.get('.mint-modal__rail-item--active').text()).toContain('Appearance')
+    })
+
+    it('should label a manual tab rail section from its section', () => {
+      const wrapper = mountSettingsModal({
+        tabs: [{ id: 'plugins', label: 'Plugins', section: 'Platform' }],
+        showAppearance: true,
+        appearanceFirst: true,
+        layout: 'vertical',
+      })
+
+      expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Personal', 'Platform'])
+    })
+
     it('should not render rail section headings when appearance is hidden', () => {
       const wrapper = mountSettingsModal({ schema: railSchema })
 

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

@@ -184,11 +184,30 @@ describe('SDK control refresh style rules', () => {
     expect(rule).toMatch(/flex-wrap:\s*wrap/)
   })
 
-  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.
+  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*5px 12px/)
+    expect(rule).toMatch(/padding:\s*10px 12px/)
+  })
+
+  // 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-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,22 +21,26 @@ 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 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 32px plugin tile beside the static plugin identity (5a)', () => {
+  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 32px tile (5a)', () => {
+  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

@@ -53,12 +53,19 @@ function undeprecatedValueExports(file: string): string[] {
 
 describe('templates deprecation', () => {
   it('should expose deprecated component tags to TypeScript consumers', () => {
-    const names = ['BioTemplateRenderer', 'SmartGroupModal', 'SampleSelector', 'DoseDesignWorkspaceView']
+    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(undeprecatedValueExports(TEMPLATES_INDEX)).toEqual([])
   })

package/src/components/AppTopBar.vue

@@ -145,7 +145,10 @@ const hasPlatformPageSelector = computed(() =>
 )
 const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
 /** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
-const identityName = computed(() => (isIntegrated.value && !hasPageSelector.value ? plugin.value?.name : undefined))
+// 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(
@@ -441,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/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/FileUploader.vue

@@ -31,7 +31,6 @@ const emit = defineEmits<{
 }>()
 
 const isDragOver = ref(false)
-const dragCount = ref(0)
 const inputRef = ref<HTMLInputElement>()
 const selectedFiles = ref<File[]>([])
 const folderName = ref<string | null>(null)
@@ -45,14 +44,9 @@ watch(() => [props.files, props.rootName] as const, ([files, rootName]) => {
 const isFolder = computed(() => props.mode === 'folder')
 const isMixed = computed(() => props.mode === 'file+folder')
 
-const promptText = computed(() => {
-  if (isDragOver.value) {
-    if (isFolder.value || dragCount.value === 0) return 'Release to add'
-    return `Release to add ${dragCount.value} file${dragCount.value === 1 ? '' : 's'}`
-  }
-  if (isMixed.value) return 'Drop files or a folder, or click to choose files'
-  if (isFolder.value) return 'Drop a folder, or click to choose'
-  return props.multiple ? 'Drop files, or click to choose' : 'Drop a file, or click to choose'
+const acceptLabel = computed(() => {
+  if (!props.accept) return isFolder.value ? 'a folder' : 'any file'
+  return props.accept.split(',').map(a => a.trim().replace('.', '').toUpperCase()).join(', ')
 })
 
 const maxSizeLabel = computed(() => {
@@ -69,12 +63,6 @@ const maxSizeLabel = computed(() => {
   return `${props.maxSize} bytes`
 })
 
-/** Accepted formats exactly as the caller wrote them, plus the size cap. */
-const formatsLabel = computed(() => [
-  props.accept?.split(',').map(a => a.trim()).filter(Boolean).join(' '),
-  maxSizeLabel.value && `max ${maxSizeLabel.value}`,
-].filter(Boolean).join(' · '))
-
 const fileTypeMap: Record<string, { color: string; label: string }> = {
   csv: { color: '#10B981', label: 'CSV' },
   tsv: { color: '#10B981', label: 'TSV' },
@@ -272,7 +260,6 @@ function handleDragOver(event: DragEvent) {
   event.preventDefault()
   if (!props.disabled) {
     isDragOver.value = true
-    dragCount.value = event.dataTransfer?.items?.length ?? 0
   }
 }
 
@@ -359,37 +346,34 @@ function formatFileSize(bytes: number): string {
       />
 
       <div class="mint-file-uploader__content">
-        <span class="mint-file-uploader__icon-tile">
-          <svg
-            v-if="isFolder"
-            class="mint-file-uploader__icon"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            viewBox="0 0 24 24"
-          >
-            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
-          </svg>
-          <svg
-            v-else
-            class="mint-file-uploader__icon"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            viewBox="0 0 24 24"
-          >
-            <path d="M12 16V4M7 9l5-5 5 5M4 20h16" />
-          </svg>
-        </span>
+        <svg
+          v-if="isFolder"
+          class="mint-file-uploader__icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+        </svg>
+        <svg
+          v-else
+          class="mint-file-uploader__icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" /><path d="m16 16-4-4-4 4" /><path d="M12 12v9" />
+        </svg>
 
-        <div class="mint-file-uploader__copy">
-          <p class="mint-file-uploader__text">{{ promptText }}</p>
-          <p v-if="formatsLabel" class="mint-file-uploader__formats">{{ formatsLabel }}</p>
-        </div>
+        <p class="mint-file-uploader__text">
+          {{ isMixed ? 'Drop files or a folder, or click to choose files' : `Drop ${acceptLabel} or click` }}
+        </p>
       </div>
     </div>
 

package/src/components/SettingsModal.schema.ts

@@ -68,7 +68,9 @@ export function normalizeVisibleSettingsTabs(
 
 export function buildSettingsTabs(
   baseTabs: SettingsTab[],
-  showAppearance: boolean
+  showAppearance: boolean,
+  appearanceFirst = false
 ): SettingsTab[] {
-  return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs
+  if (!showAppearance) return baseTabs
+  return appearanceFirst ? [APPEARANCE_TAB, ...baseTabs] : [...baseTabs, APPEARANCE_TAB]
 }

package/src/components/SettingsModal.vue

@@ -90,6 +90,8 @@ interface Props {
   /** Manual tab descriptors. Ignored when `schema` is set (groups become tabs). */
   tabs?: SettingsTabInput[]
   showAppearance?: boolean
+  /** List Appearance before the other tabs and open on it. */
+  appearanceFirst?: boolean
   size?: 'md' | 'lg' | 'xl'
   layout?: SettingsModalLayout
   /** Declarative schema — fields auto-render via SDK form components. */
@@ -238,7 +240,7 @@ const allTabs = computed<SettingsTab[]>(() => {
   const base: SettingsTab[] = settingsSchema.value
     ? visibleSchemaGroups.value.map(settingsGroupToTab)
     : manualTabs.value
-  return buildSettingsTabs(base, props.showAppearance)
+  return buildSettingsTabs(base, props.showAppearance, props.appearanceFirst)
 })
 
 const activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)
@@ -272,7 +274,7 @@ const modalTabs = computed<ModalTab[]>(() =>
       description: tab.description,
       meta: group ? (modified ? String(modified) : undefined) : tab.meta,
       // Sections only split plugin groups from Appearance; without it there is nothing to split.
-      section: props.showAppearance ? (tab.id === APPEARANCE_TAB_ID ? 'Personal' : 'Plugin') : undefined,
+      section: props.showAppearance ? (tab.id === APPEARANCE_TAB_ID ? 'Personal' : tab.section ?? 'Plugin') : undefined,
     }
   }),
 )

package/src/components/index.ts

@@ -86,8 +86,8 @@ export { /** @deprecated Removed in MINT 1.4. */ default as SampleLegend } from
 export { /** @deprecated Removed in MINT 1.4. */ default as ExperimentTimeline } from './ExperimentTimeline.vue'
 
 // Sample management components
-/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SampleSelector } from './SampleSelector.vue'
+/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
+export { default as SampleSelector } from './SampleSelector.vue'
 /** Smart Group modal wired to the `useAutoGroup` engine. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
 export { /** @deprecated Removed in MINT 1.4. */ default as AutoGroupModal } from './AutoGroupModal.vue'
 /** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
@@ -114,7 +114,7 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 export { default as PlotlyChart } from './PlotlyChart.vue'
 export { default as ScientificNumber } from './ScientificNumber.vue'
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
-/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. @deprecated Scheduled for removal in MINT 1.4; instrument UI moves to the mld-ms plugins. */
+/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
 export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
 /** Status badge for instrument states: a tone dot (or dash / hollow shape for offline, never-reported and inactive) plus a label. */
 export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'

package/src/components/internal/ResourcePickerListInternal.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts" generic="T">
 /**
  * Searchable, optionally grouped single-select list shared by the experiment and
- * artifact selector modals (8b): 44px two-line rows, trailing check, skeleton,
+ * artifact selector modals: two-line rows (title, then code + meta) with status and date
+ * in a right-hand column, a filled selected row, skeleton,
  * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
  */
 import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
+import type { PillVariant } from '../../types'
 
 export interface ResourcePickerRow {
-  /** Identifier shown in mono before the title, e.g. an experiment code. */
+  /** Identifier shown as a gray pill at the start of the second line, e.g. an experiment code. */
   code?: string
   title: string
-  /** Second-line facts, joined with " · ". */
+  /** Second-line facts after the code, joined with " · ". */
   meta?: string[]
-  /** Rendered last on the second line, in mono. */
+  /** Right column, above the date, tinted by its variant. */
+  status?: { label: string; variant: PillVariant }
+  /** Right column, in mono. */
   date?: string
 }
 
@@ -206,36 +210,26 @@ watch(
           @mouseenter="activeIndex = indexOf(item)"
         >
           <span class="mint-resource-picker__text">
-            <span class="mint-resource-picker__title"
-              ><template v-if="describe(item).code"
-                ><span class="mint-resource-picker__code">{{ describe(item).code }}</span> · </template
-              >{{ describe(item).title }}</span
+            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+                describe(item).code
+              }}</span
+              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
             >
+          </span>
+          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
             <span
-              v-if="describe(item).meta?.length || describe(item).date"
-              class="mint-resource-picker__meta"
-              >{{ [...(describe(item).meta ?? [])].join(' · ')
-              }}<template v-if="describe(item).date"
-                >{{ describe(item).meta?.length ? ' · ' : ''
-                }}<span class="mint-resource-picker__date">{{ describe(item).date }}</span></template
-              ></span
+              v-if="describe(item).status"
+              class="mint-resource-picker__status"
+              :class="`mint-resource-picker__status--${describe(item).status!.variant}`"
+              >{{ describe(item).status!.label }}</span
             >
+            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
           </span>
           <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
             <slot name="actions" :item="item" />
           </span>
-          <span class="mint-resource-picker__check-slot" aria-hidden="true">
-            <svg
-              v-if="itemKey(item) === selectedKey"
-              class="mint-resource-picker__check"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path d="M3.5 8.5l3 3 6-7" />
-            </svg>
-          </span>
         </div>
       </template>
     </div>

package/src/styles/components/app-page-selector.css

@@ -1,5 +1,5 @@
 /* AppTopBar page selector — left-side route/page dropdown.
-   Trigger speaks the field language (5a): 32px, hover changes the background
+   Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
    only, open = field focus, inline 12px chevron. Menu = .mint-popover +
    .mint-menu-item (2d); __menu / __item stay as aliases. */
 
@@ -13,8 +13,8 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem 0 0.3125rem;
+  height: 2.25rem;
+  padding: 0 0.5rem 0 0.4375rem;
   border: 1px solid var(--border-color);
   background: var(--bg-card);
   color: var(--text-primary);

package/src/styles/components/app-top-bar.css

@@ -9,7 +9,7 @@
 .mint-topbar {
   display: block;
   width: 100%;
-  padding: 0.625rem 0.75rem;
+  padding: 0.75rem 1rem;
   background-color: var(--bg-secondary);
   box-sizing: border-box;
 }
@@ -19,7 +19,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  min-height: 2rem;
+  min-height: 2.375rem;
   position: relative;
 }
 
@@ -31,24 +31,28 @@
 }
 
 .mint-topbar__identity {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-/* Slotted logos sized above 32px shrink to fit instead of turning into a 32x36 tile. */
+/* Slotted logos sized above 36px shrink to fit instead of stretching the tile. */
 .mint-topbar__identity > * {
   max-width: 100%;
   max-height: 100%;
 }
 
-/* The 36px plugin tile would push the bar past 52px; the bar uses the 32px control height. */
-.mint-topbar__identity .mint-plugin-icon--topbar {
-  width: 2rem;
-  height: 2rem;
+/* Left and right fields share the 36px identity tile height. */
+.mint-topbar .mint-experiment-popover__trigger,
+.mint-topbar .mint-experiment-popover__save-trigger {
+  height: 2.25rem;
+}
+
+.mint-topbar .mint-experiment-popover__save-trigger {
+  width: 2.25rem;
 }
 
 /* Centered section — absolute so asymmetric left/right weight never shifts the
@@ -87,8 +91,8 @@
 }
 
 .mint-topbar__logo-icon {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   background-color: var(--color-primary);
   border-radius: var(--radius-md);
   display: flex;
@@ -151,7 +155,7 @@
   opacity: 0.8;
 }
 
-/* Title + subtitle stay inside the 32px control row (5a: 52px bar). */
+/* Title + subtitle stay inside the 36px control row. */
 .mint-topbar-title-group {
   display: flex;
   flex-direction: column;