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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "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/ActionItem.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { defineComponent, h } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
-import ActionItem from '../../components/ActionItem.vue'
+import ActionItemInternal from '../../components/internal/ActionItemInternal.vue'
 
 function createRouterLinkStub(navigate = vi.fn()) {
   return defineComponent({
@@ -18,9 +18,9 @@ function createRouterLinkStub(navigate = vi.fn()) {
   })
 }
 
-describe('ActionItem', () => {
+describe('ActionItemInternal', () => {
   it('renders a normal button action and emits clicks', async () => {
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       slots: { default: 'Run' },
     })
 
@@ -33,7 +33,7 @@ describe('ActionItem', () => {
   })
 
   it('renders disabled href actions without navigating or emitting', async () => {
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       props: {
         href: '/disabled',
         disabled: true,
@@ -52,7 +52,7 @@ describe('ActionItem', () => {
 
   it('renders router actions through router-link and navigates after emitting', async () => {
     const navigate = vi.fn()
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       props: { to: '/settings' },
       slots: { default: 'Settings' },
       global: {
@@ -73,7 +73,7 @@ describe('ActionItem', () => {
 
   it('renders disabled router actions without href, navigation, or emitted clicks', async () => {
     const navigate = vi.fn()
-    const wrapper = mount(ActionItem, {
+    const wrapper = mount(ActionItemInternal, {
       props: {
         to: '/settings',
         disabled: true,

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

@@ -124,6 +124,50 @@ describe('AppLayout', () => {
     })
   })
 
+  describe('responsive sidebar shell', () => {
+    it('does not render mobile toggle by default', () => {
+      const wrapper = mount(AppLayout, {
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+
+      expect(wrapper.find('.mint-layout__sidebar-toggle').exists()).toBe(false)
+      expect(wrapper.find('.mint-layout--responsive-sidebar').exists()).toBe(false)
+    })
+
+    it('renders a mobile toggle when responsiveSidebar is enabled', async () => {
+      const wrapper = mount(AppLayout, {
+        props: { responsiveSidebar: true },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+
+      const toggle = wrapper.get('.mint-layout__sidebar-toggle')
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+      expect(wrapper.find('.mint-layout__sidebar-backdrop').exists()).toBe(false)
+
+      await toggle.trigger('click')
+
+      expect(wrapper.find('.mint-layout--sidebar-open').exists()).toBe(true)
+      expect(wrapper.get('.mint-layout__sidebar-toggle').attributes('aria-expanded')).toBe('true')
+      expect(wrapper.find('.mint-layout__sidebar-backdrop').exists()).toBe(true)
+      expect(wrapper.emitted('update:sidebarOpen')).toEqual([[true]])
+    })
+
+    it('supports controlled mobile sidebar open state and closes from backdrop', async () => {
+      const wrapper = mount(AppLayout, {
+        props: {
+          responsiveSidebar: true,
+          sidebarOpen: true,
+        },
+        slots: { sidebar: '<div>Sidebar</div>' },
+      })
+
+      expect(wrapper.find('.mint-layout--sidebar-open').exists()).toBe(true)
+      await wrapper.get('.mint-layout__sidebar-backdrop').trigger('click')
+
+      expect(wrapper.emitted('update:sidebarOpen')).toEqual([[false]])
+    })
+  })
+
   describe('integration: all slots', () => {
     it('should render topbar, sidebar, and main content together', () => {
       const wrapper = mount(AppLayout, {

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

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import AppPageSelector from '../../components/AppPageSelector.vue'
+import AppPageSelectorInternal from '../../components/internal/AppPageSelectorInternal.vue'
 
-describe('AppPageSelector', () => {
+describe('AppPageSelectorInternal', () => {
   it('accepts string shorthand pages', async () => {
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppPageSelectorInternal, {
       props: {
         currentPageId: 'Workspace',
         pages: ['Workspace', 'Results'],
@@ -25,7 +25,7 @@ describe('AppPageSelector', () => {
   })
 
   it('closes linked page actions without emitting select', async () => {
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppPageSelectorInternal, {
       props: {
         currentPageId: 'workspace',
         pages: [
@@ -43,7 +43,7 @@ describe('AppPageSelector', () => {
   })
 
   it('keeps disabled linked page actions inert', async () => {
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppPageSelectorInternal, {
       props: {
         currentPageId: 'workspace',
         pages: [
@@ -66,7 +66,7 @@ describe('AppPageSelector', () => {
 
   it('emits select for button page actions', async () => {
     const page = { id: 'workspace', label: 'Workspace' }
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppPageSelectorInternal, {
       props: {
         pages: [page],
       },
@@ -81,7 +81,7 @@ describe('AppPageSelector', () => {
   it('renders PluginIcon-compatible metadata icons and keeps symbolic icons as fallback initials', async () => {
     const iconPath = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
     const pngIcon = 'data:image/png;base64,iVBORw0KGgo='
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppPageSelectorInternal, {
       props: {
         pages: [
           { id: 'analysis', label: 'Analysis', icon: iconPath },
@@ -117,7 +117,7 @@ describe('AppPageSelector', () => {
 
   it('renders https page icons through PluginIcon', async () => {
     const httpsIcon = 'https://example.com/plugin-icon.png'
-    const wrapper = mount(AppPageSelector, {
+    const wrapper = mount(AppPageSelectorInternal, {
       props: {
         pages: [
           { id: 'docs', label: 'Docs', icon: httpsIcon },

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

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import AppPillNav from '../../components/AppPillNav.vue'
+import AppPillNavInternal from '../../components/internal/AppPillNavInternal.vue'
 
-describe('AppPillNav', () => {
+describe('AppPillNavInternal', () => {
   it('accepts string shorthand items', async () => {
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppPillNavInternal, {
       props: {
         currentItemId: 'Overview',
         items: ['Overview', 'Analysis'],
@@ -22,7 +22,7 @@ describe('AppPillNav', () => {
   })
 
   it('emits select for button items but not linked items', async () => {
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppPillNavInternal, {
       props: {
         currentItemId: 'overview',
         items: [
@@ -40,7 +40,7 @@ describe('AppPillNav', () => {
 
   it('renders SVG icons from item metadata', () => {
     const icon = ['M4 12h16', 'M12 4v16']
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppPillNavInternal, {
       props: {
         items: [
           { id: 'run', label: 'Run', icon },
@@ -59,7 +59,7 @@ describe('AppPillNav', () => {
   })
 
   it('prevents disabled link navigation and selection', async () => {
-    const wrapper = mount(AppPillNav, {
+    const wrapper = mount(AppPillNavInternal, {
       props: {
         items: [
           { id: 'docs', label: 'Docs', href: '/docs', disabled: true },
@@ -75,4 +75,51 @@ describe('AppPillNav', () => {
 
     expect(wrapper.emitted('select')).toBeUndefined()
   })
+
+  it('supports dropdown child items for grouped pill navigation', async () => {
+    const wrapper = mount(AppPillNavInternal, {
+      props: {
+        currentItemId: 'pca',
+        items: [
+          { id: 'charts', label: 'Charts' },
+          {
+            id: 'visualize',
+            label: 'Visualize',
+            children: [
+              { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+              { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+            ],
+          },
+        ],
+      },
+    })
+
+    const visualizeButton = wrapper.findAll('.mint-pill-nav__item')[1]
+    expect(visualizeButton.classes()).toContain('mint-pill-nav__item--active')
+    expect(wrapper.find('.mint-pill-nav__dropdown').exists()).toBe(false)
+
+    await visualizeButton.trigger('click')
+
+    expect(wrapper.find('.mint-pill-nav__dropdown').exists()).toBe(true)
+    expect(wrapper.findAll('.mint-pill-nav__dropdown-item').map(item => item.text())).toEqual([
+      'PCAPrincipal component analysis',
+      'HeatmapMetabolite heatmap',
+    ])
+
+    await wrapper.findAll('.mint-pill-nav__dropdown-item')[1].trigger('click')
+
+    expect(wrapper.emitted('option-select')).toEqual([
+      [
+        { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+        {
+          id: 'visualize',
+          label: 'Visualize',
+          children: [
+            { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+            { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+          ],
+        },
+      ],
+    ])
+  })
 })

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

@@ -145,6 +145,120 @@ describe('AppSidebar', () => {
     })
   })
 
+  describe('sidebar chrome and collapse state', () => {
+    it('applies analysis variant defaults for common plugin sidebars', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          variant: 'analysis',
+          title: 'Peak Picking',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(false)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 20rem')
+      expect(wrapper.find('.mint-sidebar__collapse-button').exists()).toBe(true)
+    })
+
+    it('lets explicit props override analysis variant defaults', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          variant: 'analysis',
+          floating: true,
+          width: '18rem',
+          collapsible: false,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
+      expect(wrapper.find('.mint-sidebar__collapse-button').exists()).toBe(false)
+    })
+
+    it('renders title, subtitle, and badge in the built-in header', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          title: 'Peak Picking',
+          subtitle: 'run-001.msd',
+          badge: 3,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar__title').text()).toBe('Peak Picking')
+      expect(wrapper.find('.mint-sidebar__subtitle').text()).toBe('run-001.msd')
+      expect(wrapper.find('.mint-sidebar__badge').text()).toBe('3')
+    })
+
+    it('toggles uncontrolled collapsed state and emits the update', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          title: 'Peak Picking',
+          collapsible: true,
+          width: '18rem',
+          collapsedWidth: '3rem',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 18rem')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+
+      await wrapper.get('.mint-sidebar__collapse-button').trigger('click')
+
+      expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 3rem')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
+    })
+
+    it('supports controlled collapsed state and a collapsed slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          collapsible: true,
+          collapsed: true,
+        },
+        slots: {
+          collapsed: '<button class="collapsed-action">2</button>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--collapsed').exists()).toBe(true)
+      expect(wrapper.find('.collapsed-action').text()).toBe('2')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+    })
+
+    it('renders an empty analysis shell for route-owned sidebar content', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          variant: 'analysis',
+          title: 'Sequence',
+          contentId: 'seqgen-sidebar',
+          showWhenEmpty: true,
+        },
+        slots: {
+          footer: '<button class="generate-action">Generate</button>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.find('.mint-sidebar--analysis').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__sections').attributes('id')).toBe('seqgen-sidebar')
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(0)
+      expect(wrapper.find('.generate-action').exists()).toBe(true)
+    })
+  })
+
   describe('panels and activeView', () => {
     it('should render sections for active view', () => {
       const wrapper = mount(AppSidebar, {
@@ -569,6 +683,18 @@ describe('AppSidebar', () => {
   })
 
   describe('slots', () => {
+    it('renders the default slot as sidebar content without panels', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { variant: 'analysis' },
+        slots: {
+          default: '<div class="route-sidebar-content">Route controls</div>',
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.find('.route-sidebar-content').text()).toBe('Route controls')
+    })
+
     it('should render header slot', () => {
       const wrapper = mount(AppSidebar, {
         props: { panels: samplePanels, activeView: 'analysis' },

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

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import AppToastContainer from '../../components/AppToastContainer.vue'
-import ToastNotification from '../../components/ToastNotification.vue'
 import { useToast } from '../../composables/useToast'
 
 describe('AppToastContainer', () => {
@@ -35,14 +34,4 @@ describe('AppToastContainer', () => {
 
     expect(toast.toasts.value).toHaveLength(0)
   })
-
-  it('keeps ToastNotification as a compatibility wrapper', async () => {
-    const wrapper = mountContainer(ToastNotification)
-
-    toast.info('Legacy import still works', 10000)
-    await nextTick()
-
-    expect(wrapper.findComponent(AppToastContainer).exists()).toBe(true)
-    expect(wrapper.find('.mint-toast__message').text()).toBe('Legacy import still works')
-  })
 })