@morscherlab/mint-sdk 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -4,6 +4,7 @@ import { computed, ref } from 'vue'
 import { createPinia } from 'pinia'
 import AppTopBar from '../../components/AppTopBar.vue'
 import { usePlatformContext } from '../../composables/usePlatformContext'
+import { controlsToTopBarTabs, defineControlModel, defineControls } from '../../composables/useControlSchema'
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
@@ -223,6 +224,123 @@ describe('AppTopBar', () => {
       expect(settingsModal.props('tabs')).toEqual(settingsConfig.tabs)
     })
 
+    it('should normalize shorthand settings tabs for SettingsModal', () => {
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig: {
+          tabs: ['General', 'Advanced'],
+          showAppearance: false,
+        },
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.props('tabs')).toEqual([
+        { id: 'General', label: 'General' },
+        { id: 'Advanced', label: 'Advanced' },
+      ])
+    })
+
+    it('should sync external schema values into SettingsModal fields', async () => {
+      const schema = {
+        groups: [
+          {
+            id: 'general',
+            label: 'General',
+            fields: [
+              { name: 'threshold', label: 'Threshold', type: 'number' as const },
+              {
+                name: 'method',
+                label: 'Method',
+                type: 'select' as const,
+                props: {
+                  options: [
+                    { value: 'linear', label: 'Linear' },
+                    { value: 'logistic', label: 'Logistic' },
+                  ],
+                },
+              },
+            ],
+          },
+        ],
+      }
+      const settingsConfig: TopBarSettingsConfig = {
+        showAppearance: false,
+        schema,
+        values: { threshold: 0.25, method: 'linear', externalContext: 'experiment-1' },
+      }
+
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig,
+      })
+
+      await wrapper.setProps({
+        settingsConfig: {
+          ...settingsConfig,
+          values: { threshold: 0.75, method: 'logistic', externalContext: 'experiment-2' },
+        },
+      })
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.75')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+    })
+
+    it('should render compact controls in SettingsModal', () => {
+      const controls = defineControls({
+        threshold: {
+          label: 'Threshold',
+          default: 0.25,
+          section: 'parameters',
+          sectionLabel: 'Parameters',
+        },
+      })
+      const settingsConfig: TopBarSettingsConfig = {
+        showAppearance: false,
+        controls,
+      }
+
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig,
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.props('controls')).toStrictEqual(controls)
+      expect(wrapper.text()).toContain('Threshold')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    })
+
+    it('should pass control model to SettingsModal', () => {
+      const model = defineControlModel({
+        controls: {
+          threshold: {
+            label: 'Threshold',
+            default: 0.25,
+            section: 'parameters',
+            sectionLabel: 'Parameters',
+          },
+        },
+      })
+      const settingsConfig: TopBarSettingsConfig = {
+        showAppearance: false,
+        model,
+      }
+
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig,
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.props('model')).toStrictEqual(model)
+      expect(wrapper.text()).toContain('Threshold')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+    })
+
     it('should pass showAppearance to SettingsModal', () => {
       const settingsConfig: TopBarSettingsConfig = {
         showAppearance: false,
@@ -294,6 +412,22 @@ describe('AppTopBar', () => {
       expect(settingsModal.vm.$slots['tab-general']).toBeDefined()
     })
 
+    it('should forward shorthand settings-tab slots to SettingsModal', () => {
+      const wrapper = createWrapper({
+        title: 'Test App',
+        showSettings: true,
+        settingsConfig: {
+          tabs: ['General'],
+          showAppearance: false,
+        },
+      }, {
+        'settings-tab-General': '<div>General Content</div>',
+      })
+
+      const settingsModal = wrapper.findComponent(SettingsModal)
+      expect(settingsModal.vm.$slots['tab-General']).toBeDefined()
+    })
+
     it('should forward multiple settings-tab slots', () => {
       const settingsConfig: TopBarSettingsConfig = {
         tabs: [
@@ -492,6 +626,100 @@ describe('AppTopBar', () => {
       expect(wrapper.findComponent(ThemeToggle).exists()).toBe(true)
       expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(true)
     })
+
+    it('renders tabs generated from a compact control schema', async () => {
+      const runIcon = 'M8 5v14l11-7z'
+      const controls = defineControls({
+        threshold: {
+          default: 0.05,
+          section: 'parameters',
+          view: 'analysis',
+        },
+        chartScale: {
+          default: 'linear',
+          section: 'display',
+          view: 'results',
+        },
+      })
+      const wrapper = createWrapper({
+        tabs: controlsToTopBarTabs(controls, {
+          views: {
+            analysis: { label: 'Run', icon: runIcon },
+            results: { label: 'Results' },
+          },
+        }),
+        currentTabId: 'analysis',
+      })
+
+      const tabs = wrapper.findAll('.mint-topbar-tab')
+      expect(tabs.map(tab => tab.text())).toEqual(['Run', 'Results'])
+      expect(tabs[0].classes()).toContain('mint-topbar-tab--active')
+      expect(tabs[0].get('.mint-topbar-tab-icon path').attributes('d')).toBe(runIcon)
+      expect(tabs[1].find('.mint-topbar-tab-icon').exists()).toBe(false)
+
+      await tabs[1].trigger('click')
+      expect(wrapper.emitted('tab-select')?.[0][0]).toMatchObject({ id: 'results', label: 'Results' })
+    })
+
+    it('uses shared dropdown state for the legacy page menu', async () => {
+      const wrapper = createWrapper({
+        pluginName: 'Test Plugin',
+        pages: [
+          { id: 'dashboard', label: 'Dashboard' },
+          { id: 'settings', label: 'Settings' },
+        ],
+      })
+      const dropdown = () => wrapper.get('.mint-topbar-dropdown')
+
+      expect(dropdown().attributes('style')).toContain('display: none')
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      expect(dropdown().attributes('style') ?? '').not.toContain('display: none')
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await wrapper.vm.$nextTick()
+      expect(dropdown().attributes('style')).toContain('display: none')
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      expect(dropdown().attributes('style') ?? '').not.toContain('display: none')
+
+      document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await wrapper.vm.$nextTick()
+      expect(dropdown().attributes('style')).toContain('display: none')
+
+      wrapper.unmount()
+    })
+
+    it('renders PluginIcon-compatible metadata icons in the legacy page menu', async () => {
+      const iconPath = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
+      const pngIcon = 'data:image/png;base64,iVBORw0KGgo='
+      const wrapper = createWrapper({
+        pluginName: 'Test Plugin',
+        pages: [
+          { id: 'dashboard', label: 'Dashboard', to: '/', icon: iconPath, description: 'Overview' },
+          { id: 'image', label: 'Image', to: '/image', icon: pngIcon },
+          { id: 'legacy', label: 'Legacy', icon: 'home' },
+        ],
+        currentPageId: 'dashboard',
+      })
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+
+      const icons = wrapper.findAllComponents({ name: 'PluginIcon' })
+      expect(icons).toHaveLength(2)
+      expect(icons[0].props('icon')).toBe(iconPath)
+      expect(icons[1].props('icon')).toBe(pngIcon)
+      expect(icons.every((icon) => icon.props('variant') === 'tinted')).toBe(true)
+
+      const pathIcons = wrapper.findAll('.mint-plugin-icon__svg')
+      expect(pathIcons).toHaveLength(1)
+      expect(pathIcons[0].find('path').attributes('d')).toBe(iconPath)
+
+      const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
+      expect(imageIcons).toHaveLength(1)
+      expect(imageIcons[0].attributes('src')).toBe(pngIcon)
+      expect(wrapper.find('.mint-topbar-dropdown-item__description').text()).toBe('Overview')
+    })
   })
 
   describe('edge cases', () => {
@@ -621,10 +849,10 @@ describe('AppTopBar', () => {
 
       expect(wrapper.find('.mint-topbar__logo-text').exists()).toBe(true)
       expect(wrapper.find('.mint-topbar__logo-text').text()).toBe('M')
-      expect(wrapper.find('.mint-topbar__logo-svg').exists()).toBe(false)
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).exists()).toBe(false)
     })
 
-    it('should render plugin metadata icon SVG when plugin has icon', () => {
+    it('should render PluginIcon when plugin metadata has an icon', () => {
       const iconPath = 'M13 10V3L4 14h7v7l9-11h-7z'
       mockPlatformCtx({
         isIntegrated: true,
@@ -633,13 +861,31 @@ describe('AppTopBar', () => {
 
       const wrapper = createWrapper({ title: 'Test App' })
 
-      const svg = wrapper.find('.mint-topbar__logo-svg')
-      expect(svg.exists()).toBe(true)
-      expect(svg.find('path').attributes('d')).toBe(iconPath)
+      const pluginIcon = wrapper.findComponent({ name: 'PluginIcon' })
+      expect(pluginIcon.exists()).toBe(true)
+      expect(pluginIcon.props('icon')).toBe(iconPath)
+      expect(pluginIcon.props('variant')).toBe('solid')
+      expect(pluginIcon.props('size')).toBe('md')
       expect(wrapper.find('.mint-topbar__logo-text').exists()).toBe(false)
     })
 
-    it('should not render plugin icon when #icon slot is provided', () => {
+    it('should pass plugin.color to PluginIcon as tone', () => {
+      const iconPath = 'M13 10V3L4 14h7v7l9-11h-7z'
+      mockPlatformCtx({
+        isIntegrated: true,
+        plugin: {
+          id: 'test', name: 'Test', version: '1.0',
+          icon: iconPath, color: '#22C55E',
+          route_prefix: '/test', api_prefix: '/api/test',
+        },
+      })
+
+      const wrapper = createWrapper({ title: 'Test App' })
+
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).props('tone')).toBe('#22C55E')
+    })
+
+    it('should not render PluginIcon when #icon slot is provided', () => {
       const iconPath = 'M13 10V3L4 14h7v7l9-11h-7z'
       mockPlatformCtx({
         isIntegrated: true,
@@ -651,10 +897,10 @@ describe('AppTopBar', () => {
       })
 
       expect(wrapper.find('.custom-icon').exists()).toBe(true)
-      expect(wrapper.find('.mint-topbar__logo-svg').exists()).toBe(false)
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).exists()).toBe(false)
     })
 
-    it('should not render plugin icon when icon does not start with M', () => {
+    it('should still render PluginIcon when icon does not start with M (PluginIcon shows fallback)', () => {
       mockPlatformCtx({
         isIntegrated: true,
         plugin: { id: 'test', name: 'Test', version: '1.0', icon: 'invalid-path', route_prefix: '/test', api_prefix: '/api/test' },
@@ -662,12 +908,12 @@ describe('AppTopBar', () => {
 
       const wrapper = createWrapper({ title: 'Test App' })
 
-      expect(wrapper.find('.mint-topbar__logo-svg').exists()).toBe(false)
-      expect(wrapper.find('.mint-topbar__logo-text').exists()).toBe(true)
-      expect(wrapper.find('.mint-topbar__logo-text').text()).toBe('M')
+      // Topbar passes any non-empty icon string to PluginIcon, which decides what to render.
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).exists()).toBe(true)
+      expect(wrapper.find('.mint-topbar__logo-text').exists()).toBe(false)
     })
 
-    it('should not render plugin icon when icon is empty string', () => {
+    it('should not render PluginIcon when icon is empty string', () => {
       mockPlatformCtx({
         isIntegrated: true,
         plugin: { id: 'test', name: 'Test', version: '1.0', icon: '', route_prefix: '/test', api_prefix: '/api/test' },
@@ -675,9 +921,164 @@ describe('AppTopBar', () => {
 
       const wrapper = createWrapper({ title: 'Test App' })
 
-      expect(wrapper.find('.mint-topbar__logo-svg').exists()).toBe(false)
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).exists()).toBe(false)
       expect(wrapper.find('.mint-topbar__logo-text').exists()).toBe(true)
       expect(wrapper.find('.mint-topbar__logo-text').text()).toBe('M')
     })
+
+    it('uses platform plugin nav metadata when pluginName and pages are omitted', async () => {
+      const previousPath = window.location.pathname
+      window.history.pushState({}, '', '/test/analysis')
+      try {
+        const pluginIcon = 'M13 10V3L4 14h7v7l9-11h-7z'
+        const analysisIcon = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
+        mockPlatformCtx({
+          isIntegrated: true,
+          plugin: {
+            id: 'test',
+            name: 'Dose Designer',
+            version: '1.0',
+            icon: pluginIcon,
+            route_prefix: '/test',
+            api_prefix: '/api/test',
+            nav_items: [
+              { path: '/', label: 'Dashboard' },
+              { path: '/analysis', label: 'Analysis', icon: analysisIcon },
+            ],
+          },
+        })
+
+        const wrapper = createWrapper()
+        await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+
+        expect(wrapper.get('.mint-topbar-plugin-name').text()).toContain('Dose Designer')
+        expect(wrapper.get('.mint-topbar-current-page').text()).toBe('Analysis')
+        expect(wrapper.findAll('.mint-topbar-dropdown-item__label').map(item => item.text())).toEqual([
+          'Dashboard',
+          'Analysis',
+        ])
+        const dropdownIcons = wrapper
+          .findAllComponents({ name: 'PluginIcon' })
+          .filter(icon => icon.classes().includes('mint-topbar-dropdown-item__icon'))
+        expect(dropdownIcons.map(icon => icon.props('icon'))).toEqual([pluginIcon, analysisIcon])
+        expect(wrapper.findAll('.mint-topbar-dropdown-item')[1].classes()).toContain('mint-topbar-dropdown-item--active')
+      } finally {
+        window.history.pushState({}, '', previousPath)
+      }
+    })
+
+    it('keeps explicit legacy pages ahead of platform plugin nav metadata', async () => {
+      mockPlatformCtx({
+        isIntegrated: true,
+        plugin: {
+          id: 'test',
+          name: 'Dose Designer',
+          version: '1.0',
+          route_prefix: '/test',
+          api_prefix: '/api/test',
+          nav_items: [{ path: '/stale', label: 'Stale' }],
+        },
+      })
+
+      const wrapper = createWrapper({
+        pluginName: 'Explicit Plugin',
+        pages: [{ id: 'overview', label: 'Overview', to: '/' }],
+      })
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+
+      expect(wrapper.get('.mint-topbar-plugin-name').text()).toContain('Explicit Plugin')
+      expect(wrapper.findAll('.mint-topbar-dropdown-item__label').map(item => item.text())).toEqual(['Overview'])
+    })
+  })
+
+  describe('shorthand navigation items', () => {
+    it('accepts string shorthand for pageSelector', async () => {
+      const wrapper = createWrapper({
+        currentPageSelectorId: 'Workspace',
+        pageSelector: ['Workspace', 'Results'],
+      })
+
+      expect(wrapper.find('.mint-page-selector__label').text()).toBe('Workspace')
+
+      await wrapper.get('.mint-page-selector__trigger').trigger('click')
+      await wrapper.findAll('.mint-page-selector__item')[1].trigger('click')
+
+      expect(wrapper.emitted('page-selector-select')).toEqual([
+        [{ id: 'Results', label: 'Results' }],
+      ])
+    })
+
+    it('accepts string shorthand for pillNav', async () => {
+      const wrapper = createWrapper({
+        currentPillId: 'Run',
+        pillNav: ['Run', 'Results'],
+      })
+
+      expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
+        'Run',
+        'Results',
+      ])
+
+      await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')
+
+      expect(wrapper.emitted('pill-select')).toEqual([
+        [{ id: 'Results', label: 'Results' }],
+      ])
+    })
+
+    it('accepts string shorthand for legacy pages', async () => {
+      const wrapper = createWrapper({
+        pluginName: 'Analysis',
+        currentPageId: 'Overview',
+        pages: ['Overview', 'Settings'],
+      })
+
+      await wrapper.get('.mint-topbar-plugin-name').trigger('click')
+      await wrapper.findAll('.mint-topbar-dropdown-item')[1].trigger('click')
+
+      expect(wrapper.emitted('page-select')).toEqual([
+        [{ id: 'Settings', label: 'Settings' }],
+      ])
+    })
+
+    it('accepts string shorthand for legacy tabs', async () => {
+      const wrapper = createWrapper({
+        currentTabId: 'Run',
+        tabs: ['Run', 'Results'],
+      })
+
+      expect(wrapper.findAll('.mint-topbar-tab').map(tab => tab.text())).toEqual([
+        'Run',
+        'Results',
+      ])
+
+      await wrapper.findAll('.mint-topbar-tab')[1].trigger('click')
+
+      expect(wrapper.emitted('tab-select')).toEqual([
+        [{ id: 'Results', label: 'Results' }],
+      ])
+    })
+
+    it('accepts string shorthand for legacy tab dropdown options', async () => {
+      const wrapper = createWrapper({
+        currentTabId: 'Summary',
+        tabs: [
+          { id: 'analysis', label: 'Analysis', children: ['Summary', 'Details'] },
+        ],
+      })
+
+      await wrapper.get('.mint-topbar-tab').trigger('click')
+      expect(wrapper.findAll('.mint-topbar-dropdown-item').map(item => item.text())).toEqual([
+        'Summary',
+        'Details',
+      ])
+
+      await wrapper.findAll('.mint-topbar-dropdown-item')[1].trigger('click')
+
+      expect(wrapper.emitted('tab-option-select')?.[0]?.[0]).toEqual({
+        id: 'Details',
+        label: 'Details',
+      })
+    })
   })
 })

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

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseRadioGroup from '../../components/BaseRadioGroup.vue'
+
+describe('BaseRadioGroup', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(BaseRadioGroup, {
+      props: {
+        name: 'plate-format',
+        modelValue: 96,
+        options: [96, 384, { value: 'custom', label: 'Custom' }],
+      },
+    })
+
+    expect(wrapper.findAll('.mint-radio-option__label').map(label => label.text())).toEqual([
+      '96',
+      '384',
+      'Custom',
+    ])
+
+    await wrapper.findAll('input')[1].setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([384])
+  })
+})

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

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseSelect from '../../components/BaseSelect.vue'
+
+describe('BaseSelect', () => {
+  it('accepts string and number shorthand options', async () => {
+    const wrapper = mount(BaseSelect, {
+      props: {
+        modelValue: 'linear',
+        options: ['linear', 96, { value: 'log', label: 'Log scale' }],
+      },
+    })
+
+    const options = wrapper.findAll('option')
+    expect(options.map(option => option.text())).toEqual(['linear', '96', 'Log scale'])
+
+    await wrapper.get('select').setValue('96')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([96])
+  })
+})

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

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseTabs from '../../components/BaseTabs.vue'
+
+describe('BaseTabs', () => {
+  it('accepts string shorthand tabs', async () => {
+    const wrapper = mount(BaseTabs, {
+      props: {
+        modelValue: 'Run',
+        tabs: ['Run', 'Results', { id: 'settings', label: 'Settings', disabled: true }],
+      },
+    })
+
+    expect(wrapper.findAll('.mint-tab').map(tab => tab.text())).toEqual([
+      'Run',
+      'Results',
+      'Settings',
+    ])
+
+    await wrapper.findAll('.mint-tab')[1].trigger('click')
+    await wrapper.findAll('.mint-tab')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['Results']])
+  })
+})

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

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BatchProgressList from '../../components/BatchProgressList.vue'
+import type { BatchItem } from '../../types'
+
+const items: BatchItem[] = [
+  { id: 'a', label: 'Sample A', status: 'completed' },
+  { id: 'b', label: 'Sample B', status: 'error', message: 'Import failed' },
+  { id: 'c', label: 'Sample C', status: 'processing', progress: 50 },
+]
+
+describe('BatchProgressList', () => {
+  it('summarizes progress and emits row actions', async () => {
+    const wrapper = mount(BatchProgressList, {
+      props: {
+        title: 'Import',
+        items,
+        autoScroll: false,
+      },
+    })
+
+    expect(wrapper.find('.mint-batch-progress__percent').text()).toBe('33%')
+    expect(wrapper.text()).toContain('1 completed')
+    expect(wrapper.text()).toContain('1 failed')
+    expect(wrapper.text()).toContain('1 processing')
+
+    await wrapper.get('.mint-batch-progress__retry-btn').trigger('click')
+    await wrapper.get('.mint-batch-progress__cancel-btn').trigger('click')
+
+    expect(wrapper.emitted('retry')).toEqual([[items[1].id]])
+    expect(wrapper.emitted('cancel')).toEqual([[items[2].id]])
+  })
+
+  it('uses shared expansion state for error messages', async () => {
+    const wrapper = mount(BatchProgressList, {
+      props: {
+        items,
+        autoScroll: false,
+      },
+    })
+
+    expect(wrapper.find('.mint-batch-progress__item-message').exists()).toBe(false)
+
+    await wrapper.get('.mint-batch-progress__error-toggle').trigger('click')
+    expect(wrapper.get('.mint-batch-progress__error-toggle').text()).toBe('Hide error')
+    expect(wrapper.get('.mint-batch-progress__item-message').text()).toBe('Import failed')
+
+    await wrapper.get('.mint-batch-progress__error-toggle').trigger('click')
+    expect(wrapper.get('.mint-batch-progress__error-toggle').text()).toBe('Show error')
+    expect(wrapper.find('.mint-batch-progress__item-message').exists()).toBe(false)
+  })
+})