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

package/src/__stories__/experiment-helpers.ts

@@ -1,86 +0,0 @@
-/**
- * Shared helpers for story files that need experiment selector integration.
- * Provides mock data, API interceptors, and a provider wrapper component.
- */
-import { defineComponent, onUnmounted } from 'vue'
-import { useAppExperiment } from '../composables/useAppExperiment'
-import { useApi } from '../composables/useApi'
-import { useExperimentStore } from '../stores/experiment'
-import type { ExperimentSummary } from '../types'
-
-export const mockExperiments: ExperimentSummary[] = [
-  { id: 1, experiment_code: 'DR-HeLa-DOX-001', name: 'Doxorubicin dose-response in HeLa cells', status: 'completed', experiment_type: 'dose_response', project: 'Oncology Screen Q1', project_name: 'Oncology Screen Q1', created_at: '2026-02-28T14:30:00Z', updated_at: '2026-03-01T09:15:00Z', has_design_data: true },
-  { id: 2, experiment_code: 'CV-MCF7-24H-002', name: 'MCF-7 cell viability 24h time course', status: 'completed', experiment_type: 'cell_viability', project: 'Oncology Screen Q1', project_name: 'Oncology Screen Q1', created_at: '2026-02-25T10:00:00Z', updated_at: '2026-02-26T16:45:00Z', has_design_data: true },
-  { id: 3, experiment_code: 'DR-PANC1-GEM-003', name: 'Gemcitabine IC50 in PANC-1', status: 'ongoing', experiment_type: 'dose_response', project: 'Pancreatic Cancer', project_name: 'Pancreatic Cancer', created_at: '2026-03-01T08:00:00Z', updated_at: '2026-03-02T11:30:00Z', has_design_data: true },
-  { id: 4, experiment_code: 'CV-A549-CIS-004', name: 'Cisplatin cytotoxicity A549 lung', status: 'ongoing', experiment_type: 'cell_viability', project: 'Lung Cancer Panel', project_name: 'Lung Cancer Panel', created_at: '2026-03-01T13:00:00Z', updated_at: '2026-03-02T08:00:00Z', has_design_data: false },
-  { id: 5, experiment_code: 'DR-HEK293-CTRL-005', name: 'HEK-293T control viability baseline', status: 'completed', experiment_type: 'dose_response', project: 'Toxicity Controls', project_name: 'Toxicity Controls', created_at: '2026-02-20T09:00:00Z', updated_at: '2026-02-22T17:00:00Z', has_design_data: true },
-]
-
-const mockExperimentTypes = [
-  { name: 'dose_response', color: '#3b82f6' },
-  { name: 'cell_viability', color: '#10b981' },
-]
-
-const mockProjects = [
-  { id: 1, name: 'Oncology Screen Q1' },
-  { id: 2, name: 'Pancreatic Cancer' },
-  { id: 3, name: 'Lung Cancer Panel' },
-  { id: 4, name: 'Toxicity Controls' },
-]
-
-export function installMockInterceptor() {
-  const { client } = useApi()
-  client.interceptors.request.use((config) => {
-    const url = config.url ?? ''
-    if (url.includes('/experiments/experiment-types')) {
-      config.adapter = () => Promise.resolve({ data: mockExperimentTypes, status: 200, statusText: 'OK', headers: {}, config })
-      return config
-    }
-    if (url.includes('/projects')) {
-      config.adapter = () => Promise.resolve({ data: mockProjects, status: 200, statusText: 'OK', headers: {}, config })
-      return config
-    }
-    if (url.startsWith('/api/experiments')) {
-      const params = new URLSearchParams(url.split('?')[1] ?? '')
-      const skip = Number(params.get('skip') ?? 0)
-      const limit = Number(params.get('limit') ?? 100)
-      let filtered = [...mockExperiments]
-      const status = params.get('status')
-      const search = params.get('search')?.toLowerCase()
-      if (status) filtered = filtered.filter(e => e.status === status)
-      if (search) filtered = filtered.filter(e => e.name.toLowerCase().includes(search) || e.experiment_code?.toLowerCase().includes(search))
-      config.adapter = () => Promise.resolve({ data: { experiments: filtered.slice(skip, skip + limit), total: filtered.length }, status: 200, statusText: 'OK', headers: {}, config })
-    }
-    return config
-  })
-}
-
-/**
- * Wrapper component that fakes integrated mode and provides useAppExperiment context.
- * Use in story files to demonstrate experiment selector integration.
- *
- * The preselected experiment is committed to the shared store as a full
- * platform record — the same path the selector modal uses at runtime.
- *
- * Props:
- *   preselect (boolean, default true) - pre-select the first mock experiment
- */
-export const ExperimentProvider = defineComponent({
-  props: { preselect: { type: Boolean, default: true } },
-  setup(props, { slots }) {
-    ;(window as any).__MINT_PLATFORM__ = { isIntegrated: true, theme: 'system' }
-    installMockInterceptor()
-    const experimentStore = useExperimentStore()
-    useAppExperiment({
-      onSave: async () => 'Saved!',
-    })
-    if (props.preselect && mockExperiments[0]) {
-      experimentStore.select(mockExperiments[0])
-    }
-    onUnmounted(() => {
-      experimentStore.clear()
-      delete (window as any).__MINT_PLATFORM__
-    })
-    return () => slots.default?.()
-  },
-})

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

@@ -1,99 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { defineComponent, h } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
-import ActionItemInternal from '../../components/internal/ActionItemInternal.vue'
-
-function createRouterLinkStub(navigate = vi.fn()) {
-  return defineComponent({
-    name: 'RouterLinkStub',
-    props: {
-      to: [String, Object],
-      custom: Boolean,
-    },
-    setup(props, { slots }) {
-      return () => props.custom
-        ? slots.default?.({ href: props.to, navigate })
-        : h('a', { href: props.to, onClick: navigate }, slots.default?.())
-    },
-  })
-}
-
-describe('ActionItemInternal', () => {
-  it('renders a normal button action and emits clicks', async () => {
-    const wrapper = mount(ActionItemInternal, {
-      slots: { default: 'Run' },
-    })
-
-    const button = wrapper.get('button')
-    expect(button.attributes('type')).toBe('button')
-
-    await button.trigger('click')
-
-    expect(wrapper.emitted('click')).toHaveLength(1)
-  })
-
-  it('renders disabled href actions without navigating or emitting', async () => {
-    const wrapper = mount(ActionItemInternal, {
-      props: {
-        href: '/disabled',
-        disabled: true,
-      },
-      slots: { default: 'Disabled' },
-    })
-
-    const link = wrapper.get('a')
-    expect(link.attributes('href')).toBeUndefined()
-    expect(link.attributes('aria-disabled')).toBe('true')
-
-    await link.trigger('click')
-
-    expect(wrapper.emitted('click')).toBeUndefined()
-  })
-
-  it('renders router actions through router-link and navigates after emitting', async () => {
-    const navigate = vi.fn()
-    const wrapper = mount(ActionItemInternal, {
-      props: { to: '/settings' },
-      slots: { default: 'Settings' },
-      global: {
-        stubs: {
-          'router-link': createRouterLinkStub(navigate),
-        },
-      },
-    })
-
-    const link = wrapper.get('a')
-    expect(link.attributes('href')).toBe('/settings')
-
-    await link.trigger('click')
-
-    expect(wrapper.emitted('click')).toHaveLength(1)
-    expect(navigate).toHaveBeenCalledTimes(1)
-  })
-
-  it('renders disabled router actions without href, navigation, or emitted clicks', async () => {
-    const navigate = vi.fn()
-    const wrapper = mount(ActionItemInternal, {
-      props: {
-        to: '/settings',
-        disabled: true,
-      },
-      slots: { default: 'Settings' },
-      global: {
-        stubs: {
-          'router-link': createRouterLinkStub(navigate),
-        },
-      },
-    })
-
-    const link = wrapper.get('a')
-    expect(link.attributes('href')).toBeUndefined()
-    expect(link.attributes('aria-disabled')).toBe('true')
-    expect(link.attributes('tabindex')).toBe('-1')
-
-    await link.trigger('click')
-
-    expect(wrapper.emitted('click')).toBeUndefined()
-    expect(navigate).not.toHaveBeenCalled()
-  })
-})

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

@@ -1,120 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { enableAutoUnmount, mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
-import ActionMenu from '../../components/ActionMenu.vue'
-
-const items = [
-  { id: 'edit', label: 'Edit' },
-  { id: 'delete', label: 'Delete', danger: true },
-]
-
-enableAutoUnmount(afterEach)
-
-describe('ActionMenu', () => {
-  it('should render the default trigger with the Lucide ellipsis icon', () => {
-    const wrapper = mount(ActionMenu, {
-      props: { label: 'More user actions', items },
-    })
-
-    expect(wrapper.find('svg.lucide-ellipsis').exists()).toBe(true)
-  })
-
-  it('should keep the default trigger icon at 16 pixels', () => {
-    const styles = readFileSync(
-      resolve(process.cwd(), 'src/styles/components/action-menu.css'),
-      'utf8',
-    )
-
-    expect(styles).toMatch(
-      /\.mint-action-menu__trigger-icon\s*\{[^}]*width:\s*1rem;[^}]*height:\s*1rem;/s,
-    )
-  })
-
-  it('should expose menu semantics on the square trigger', () => {
-    const wrapper = mount(ActionMenu, {
-      props: { label: 'More user actions', items },
-    })
-
-    expect(wrapper.get('button').attributes('aria-haspopup')).toBe('menu')
-  })
-
-  it('should teleport the menu to the document body when opened', async () => {
-    const wrapper = mount(ActionMenu, {
-      attachTo: document.body,
-      props: { label: 'More user actions', items },
-    })
-
-    await wrapper.get('button').trigger('click')
-
-    expect(document.body.querySelector('.mint-action-menu__panel')).not.toBeNull()
-  })
-
-  it('should emit the selected action item when an item is clicked', async () => {
-    const wrapper = mount(ActionMenu, {
-      attachTo: document.body,
-      props: { label: 'More user actions', items },
-    })
-    await wrapper.get('button').trigger('click')
-
-    const menuItems = document.body.querySelectorAll<HTMLButtonElement>('.mint-action-menu__item')
-    menuItems[0]?.click()
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('select')).toEqual([[items[0]]])
-  })
-
-  it('should render link items as semantic anchors', async () => {
-    const wrapper = mount(ActionMenu, {
-      attachTo: document.body,
-      props: {
-        label: 'More plugin actions',
-        items: [{ id: 'docs', label: 'Documentation', href: '/docs' }],
-      },
-    })
-    await wrapper.get('button').trigger('click')
-
-    expect(document.body.querySelector('.mint-action-menu__item')?.tagName).toBe('A')
-  })
-
-  it('should mark destructive items with the danger treatment', async () => {
-    const wrapper = mount(ActionMenu, {
-      attachTo: document.body,
-      props: { label: 'More user actions', items },
-    })
-    await wrapper.get('button').trigger('click')
-
-    const menuItems = document.body.querySelectorAll('.mint-action-menu__item')
-
-    expect(menuItems[1]?.classList.contains('mint-action-menu__item--danger')).toBe(true)
-  })
-
-  it('should close an open menu when its scroll context moves', async () => {
-    const wrapper = mount(ActionMenu, {
-      attachTo: document.body,
-      props: { label: 'More user actions', items },
-    })
-    await wrapper.get('button').trigger('click')
-
-    window.dispatchEvent(new Event('scroll'))
-    await wrapper.vm.$nextTick()
-
-    expect(document.body.querySelector('.mint-action-menu__panel')).toBeNull()
-  })
-
-  it('should return focus to the trigger when Escape closes the menu', async () => {
-    const wrapper = mount(ActionMenu, {
-      attachTo: document.body,
-      props: { label: 'More user actions', items },
-    })
-    const trigger = wrapper.get<HTMLButtonElement>('button')
-    await trigger.trigger('click')
-
-    document.body.querySelector<HTMLElement>('.mint-action-menu__item')?.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
-    )
-    await wrapper.vm.$nextTick()
-
-    expect(document.activeElement).toBe(trigger.element)
-  })
-})

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

@@ -1,38 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import AppAvatarMenu from '../../components/AppAvatarMenu.vue'
-
-describe('AppAvatarMenu', () => {
-  it('should vertically center avatar initials with a compact line box', () => {
-    const styles = readFileSync(
-      resolve(process.cwd(), 'src/styles/components/app-avatar-menu.css'),
-      'utf8',
-    )
-
-    expect(styles).toMatch(/\.mint-avatar-menu__avatar\s*\{[^}]*line-height:\s*1;/s)
-  })
-
-  it('renders mixed menu actions and emits selected items', async () => {
-    const docs = { id: 'docs', label: 'Docs', href: '/docs' }
-    const profile = { id: 'profile', label: 'Profile' }
-    const wrapper = mount(AppAvatarMenu, {
-      props: {
-        userName: 'Ada Lovelace',
-        items: [profile, { id: 'divider', label: '', divider: true }, docs],
-        showSignOut: false,
-      },
-    })
-
-    await wrapper.get('.mint-avatar-menu__trigger').trigger('click')
-
-    const items = wrapper.findAll('.mint-avatar-menu__item')
-    expect(items[1].element.tagName.toLowerCase()).toBe('a')
-
-    await items[1].trigger('click')
-
-    expect(wrapper.emitted('select')).toEqual([[docs]])
-    expect(wrapper.find('.mint-avatar-menu__panel').exists()).toBe(false)
-  })
-})

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

@@ -1,207 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import AppLayout from '../../components/AppLayout.vue'
-
-describe('AppLayout', () => {
-  describe('rendering with default props', () => {
-    it('should render layout with default classes', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout').exists()).toBe(true)
-      expect(wrapper.find('.mint-layout--sidebar-right').exists()).toBe(false)
-      expect(wrapper.find('.mint-layout--floating').exists()).toBe(false)
-    })
-
-    it('should render body container', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout__body').exists()).toBe(true)
-    })
-
-    it('should render main content slot', () => {
-      const wrapper = mount(AppLayout, {
-        slots: {
-          default: '<p>Main content</p>',
-        },
-      })
-      expect(wrapper.find('.mint-layout__main').exists()).toBe(true)
-      expect(wrapper.find('.mint-layout__main').text()).toBe('Main content')
-    })
-  })
-
-  describe('topbar slot', () => {
-    it('should render topbar when slot is provided', () => {
-      const wrapper = mount(AppLayout, {
-        slots: {
-          topbar: '<div class="custom-topbar">Topbar</div>',
-        },
-      })
-      expect(wrapper.find('.mint-layout__topbar').exists()).toBe(true)
-      expect(wrapper.find('.custom-topbar').text()).toBe('Topbar')
-    })
-
-    it('should not render topbar when slot is not provided', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout__topbar').exists()).toBe(false)
-    })
-  })
-
-  describe('sidebar slot', () => {
-    it('should render sidebar when slot is provided', () => {
-      const wrapper = mount(AppLayout, {
-        slots: {
-          sidebar: '<div class="custom-sidebar">Sidebar</div>',
-        },
-      })
-      expect(wrapper.find('.mint-layout__sidebar').exists()).toBe(true)
-      expect(wrapper.find('.custom-sidebar').text()).toBe('Sidebar')
-    })
-
-    it('should not render sidebar when slot is not provided', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout__sidebar').exists()).toBe(false)
-    })
-  })
-
-  describe('sidebarPosition prop', () => {
-    it('should default to left position', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout--sidebar-right').exists()).toBe(false)
-    })
-
-    it('should add right class when sidebarPosition is right', () => {
-      const wrapper = mount(AppLayout, {
-        props: { sidebarPosition: 'right' },
-      })
-      expect(wrapper.find('.mint-layout--sidebar-right').exists()).toBe(true)
-    })
-
-    it('should not add right class when sidebarPosition is left', () => {
-      const wrapper = mount(AppLayout, {
-        props: { sidebarPosition: 'left' },
-      })
-      expect(wrapper.find('.mint-layout--sidebar-right').exists()).toBe(false)
-    })
-  })
-
-  describe('floating prop', () => {
-    it('should not add floating class by default', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout--floating').exists()).toBe(false)
-    })
-
-    it('should add floating class when floating is true', () => {
-      const wrapper = mount(AppLayout, {
-        props: { floating: true },
-      })
-      expect(wrapper.find('.mint-layout--floating').exists()).toBe(true)
-    })
-  })
-
-  describe('sidebar width styling', () => {
-    it('should not apply inline width when default auto is used', () => {
-      const wrapper = mount(AppLayout, {
-        slots: { sidebar: '<div>Sidebar</div>' },
-      })
-      const sidebar = wrapper.find('.mint-layout__sidebar')
-      expect(sidebar.attributes('style')).toBeUndefined()
-    })
-
-    it('should apply custom sidebar width', () => {
-      const wrapper = mount(AppLayout, {
-        props: { sidebarWidth: '300px' },
-        slots: { sidebar: '<div>Sidebar</div>' },
-      })
-      const sidebar = wrapper.find('.mint-layout__sidebar')
-      expect(sidebar.attributes('style')).toContain('width: 300px')
-    })
-
-    it('should handle width with different CSS units', () => {
-      const wrapper = mount(AppLayout, {
-        props: { sidebarWidth: '20rem' },
-        slots: { sidebar: '<div>Sidebar</div>' },
-      })
-      const sidebar = wrapper.find('.mint-layout__sidebar')
-      expect(sidebar.attributes('style')).toContain('width: 20rem')
-    })
-  })
-
-  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, {
-        slots: {
-          topbar: '<div class="topbar-content">Header</div>',
-          sidebar: '<div class="sidebar-content">Sidebar</div>',
-          default: '<div class="main-content">Content</div>',
-        },
-      })
-
-      expect(wrapper.find('.topbar-content').text()).toBe('Header')
-      expect(wrapper.find('.sidebar-content').text()).toBe('Sidebar')
-      expect(wrapper.find('.main-content').text()).toBe('Content')
-    })
-
-    it('should apply multiple modifier classes', () => {
-      const wrapper = mount(AppLayout, {
-        props: {
-          sidebarPosition: 'right',
-          floating: true,
-        },
-      })
-
-      const layout = wrapper.find('.mint-layout')
-      expect(layout.classes()).toContain('mint-layout--sidebar-right')
-      expect(layout.classes()).toContain('mint-layout--floating')
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle empty default slot', () => {
-      const wrapper = mount(AppLayout)
-      expect(wrapper.find('.mint-layout__main').exists()).toBe(true)
-      expect(wrapper.find('.mint-layout__main').text()).toBe('')
-    })
-  })
-})

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

@@ -1,44 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import AppPluginSwitcher from '../../components/AppPluginSwitcher.vue'
-
-describe('AppPluginSwitcher', () => {
-  it('renders button and link plugin actions through the same menu path', async () => {
-    const current = { id: 'drp', label: 'DRP' }
-    const planner = { id: 'planner', label: 'Planner' }
-    const docs = { id: 'docs', label: 'Docs', href: '/docs' }
-    const wrapper = mount(AppPluginSwitcher, {
-      props: {
-        current,
-        plugins: [current, planner, docs],
-      },
-    })
-
-    await wrapper.get('.mint-plugin-switcher__trigger').trigger('click')
-
-    const items = wrapper.findAll('.mint-plugin-switcher__item')
-    expect(items[2].element.tagName.toLowerCase()).toBe('a')
-
-    await items[1].trigger('click')
-
-    expect(wrapper.emitted('select')).toEqual([[planner]])
-    expect(wrapper.find('.mint-plugin-switcher__menu').exists()).toBe(false)
-  })
-
-  it('keeps linked plugin actions selectable', async () => {
-    const current = { id: 'drp', label: 'DRP' }
-    const docs = { id: 'docs', label: 'Docs', href: '/docs' }
-    const wrapper = mount(AppPluginSwitcher, {
-      props: {
-        current,
-        plugins: [current, docs],
-      },
-    })
-
-    await wrapper.get('.mint-plugin-switcher__trigger').trigger('click')
-    await wrapper.findAll('.mint-plugin-switcher__item')[1].trigger('click')
-
-    expect(wrapper.emitted('select')).toEqual([[docs]])
-    expect(wrapper.find('.mint-plugin-switcher__menu').exists()).toBe(false)
-  })
-})