@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

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

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import AppSidebar from '../../components/AppSidebar.vue'
+import FormSchemaInternal from '../../components/internal/FormSchemaInternal.vue'
 import type { SidebarToolSection } from '../../types'
 import type { FormSchema } from '../../types/form-builder'
 import {
@@ -70,14 +71,14 @@ describe('AppSidebar', () => {
 
     it('should apply default width', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 280px')
     })
 
     it('should be hidden when no panels match active view', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'settings' },
+        props: { spec: { panels: samplePanels }, activeView: 'settings' },
       })
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
     })
@@ -97,7 +98,7 @@ describe('AppSidebar', () => {
 
     it('should apply right side class', () => {
       const wrapper = mount(AppSidebar, {
-        props: { side: 'right' },
+        props: { spec: { position: 'right' } },
       })
       expect(wrapper.find('.mint-sidebar--right').exists()).toBe(true)
       expect(wrapper.find('.mint-sidebar--left').exists()).toBe(false)
@@ -113,7 +114,7 @@ describe('AppSidebar', () => {
 
     it('should apply static class when floating is false', () => {
       const wrapper = mount(AppSidebar, {
-        props: { floating: false },
+        props: { spec: { floating: false } },
       })
       expect(wrapper.find('.mint-sidebar--static').exists()).toBe(true)
       expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(false)
@@ -124,9 +125,8 @@ describe('AppSidebar', () => {
     it('should apply custom width', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, width: '300px' },
           activeView: 'analysis',
-          width: '300px',
         },
       })
       expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 300px')
@@ -135,9 +135,8 @@ describe('AppSidebar', () => {
     it('should handle different CSS units', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, width: '20rem' },
           activeView: 'analysis',
-          width: '20rem',
         },
       })
       expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 20rem')
@@ -147,7 +146,7 @@ describe('AppSidebar', () => {
   describe('sidebar chrome and collapse state', () => {
     it('renders sections as flat groups with no nested card', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
 
       expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(2)
@@ -156,7 +155,7 @@ describe('AppSidebar', () => {
 
     it('defaults to compact density', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
 
       expect(wrapper.find('.mint-sidebar--comfortable').exists()).toBe(false)
@@ -164,15 +163,7 @@ describe('AppSidebar', () => {
 
     it('applies the comfortable density class', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis', density: 'comfortable' },
-      })
-
-      expect(wrapper.find('.mint-sidebar--comfortable').exists()).toBe(true)
-    })
-
-    it('maps the deprecated dense=false to comfortable density', () => {
-      const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis', dense: false },
+        props: { spec: { panels: samplePanels, dense: false }, activeView: 'analysis' },
       })
 
       expect(wrapper.find('.mint-sidebar--comfortable').exists()).toBe(true)
@@ -181,11 +172,8 @@ describe('AppSidebar', () => {
     it('renders title, subtitle, and badge in the built-in header', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { title: 'Peak Picking', subtitle: 'run-001.msd', badge: 3, panels: samplePanels },
           activeView: 'analysis',
-          title: 'Peak Picking',
-          subtitle: 'run-001.msd',
-          badge: 3,
         },
       })
 
@@ -197,12 +185,8 @@ describe('AppSidebar', () => {
     it('toggles uncontrolled collapsed state and emits the update', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { title: 'Peak Picking', panels: samplePanels, width: '18rem', collapsible: true, collapsedWidth: '3rem' },
           activeView: 'analysis',
-          title: 'Peak Picking',
-          collapsible: true,
-          width: '18rem',
-          collapsedWidth: '3rem',
         },
       })
 
@@ -220,9 +204,8 @@ describe('AppSidebar', () => {
     it('supports controlled collapsed state and a collapsed slot', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, collapsible: true },
           activeView: 'analysis',
-          collapsible: true,
           collapsed: true,
         },
         slots: {
@@ -238,19 +221,21 @@ describe('AppSidebar', () => {
     it('renders a default collapsed rail from active sections', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: {
-            analysis: [
-              {
-                id: 'filters',
-                label: 'Feature Filters',
-                icon: 'M3 4.5h18m-15 6h12m-9 6h6',
-                badge: 2,
-                badgeTone: 'warning',
-              },
-            ],
+          spec: {
+            panels: {
+              analysis: [
+                {
+                  id: 'filters',
+                  label: 'Feature Filters',
+                  icon: 'M3 4.5h18m-15 6h12m-9 6h6',
+                  badge: 2,
+                  badgeTone: 'warning',
+                },
+              ],
+            },
+            collapsible: true,
           },
           activeView: 'analysis',
-          collapsible: true,
           collapsed: true,
         },
       })
@@ -261,13 +246,12 @@ describe('AppSidebar', () => {
       expect(wrapper.find('.mint-sidebar__rail-badge').classes()).toContain('mint-sidebar__rail-badge--warning')
     })
 
-    it('expands when a default collapsed rail item is clicked', async () => {
+    it('expands when a collapsed rail item is clicked', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, collapsible: true },
           activeView: 'analysis',
-          collapsible: true,
-          defaultCollapsed: true,
+          collapsed: true,
         },
       })
 
@@ -278,9 +262,7 @@ describe('AppSidebar', () => {
     it('renders an empty shell for route-owned sidebar content', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          title: 'Sequence',
-          contentId: 'seqgen-sidebar',
-          showWhenEmpty: true,
+          spec: { title: 'Sequence', contentId: 'seqgen-sidebar', whenEmpty: true },
         },
         slots: {
           footer: '<button class="generate-action">Generate</button>',
@@ -297,7 +279,7 @@ describe('AppSidebar', () => {
   describe('panels and activeView', () => {
     it('should render sections for active view', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
@@ -305,7 +287,7 @@ describe('AppSidebar', () => {
 
     it('should render one group for each section', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards).toHaveLength(2)
@@ -313,7 +295,7 @@ describe('AppSidebar', () => {
 
     it('should render the section label in the group header', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards[0].find('.mint-sidebar__group-label').text()).toBe('Parameters')
@@ -322,7 +304,7 @@ describe('AppSidebar', () => {
 
     it('should render the section icon in the group header', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards[0].find('.mint-sidebar__group-text-icon').text()).toBe('⚙')
@@ -331,16 +313,18 @@ describe('AppSidebar', () => {
     it('renders section badges and actions and re-emits actions', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: {
-            analysis: [
-              {
-                id: 'filters',
-                label: 'Feature Filters',
-                badge: 4,
-                badgeTone: 'cta',
-                actions: [{ id: 'reset', label: 'Reset filters' }],
-              },
-            ],
+          spec: {
+            panels: {
+              analysis: [
+                {
+                  id: 'filters',
+                  label: 'Feature Filters',
+                  badge: 4,
+                  badgeTone: 'cta',
+                  actions: [{ id: 'reset', label: 'Reset filters' }],
+                },
+              ],
+            },
           },
           activeView: 'analysis',
         },
@@ -356,7 +340,7 @@ describe('AppSidebar', () => {
 
     it('should respect defaultOpen on sections', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       const cards = wrapper.findAll('.mint-sidebar__group')
       expect(cards[0].classes()).toContain('mint-sidebar__group--open')
@@ -365,7 +349,7 @@ describe('AppSidebar', () => {
 
     it('toggles a section open state from its header', async () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
 
       await wrapper.findAll('.mint-sidebar__group-toggle')[1].trigger('click')
@@ -375,7 +359,7 @@ describe('AppSidebar', () => {
     it('emits update:toggle from the inline section switch', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: { analysis: [{ id: 'filters', label: 'Filters', showToggle: true }] },
+          spec: { panels: { analysis: [{ id: 'filters', label: 'Filters', showToggle: true }] } },
           activeView: 'analysis',
           toggleState: { filters: false },
         },
@@ -387,7 +371,7 @@ describe('AppSidebar', () => {
 
     it('should switch sections when activeView changes', async () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(2)
 
@@ -397,7 +381,7 @@ describe('AppSidebar', () => {
 
     it('should hide when switching to view with no panels', async () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
 
@@ -409,7 +393,7 @@ describe('AppSidebar', () => {
   describe('section slots', () => {
     it('should render named section slots', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
         slots: {
           'section-parameters': '<div class="params-content">Parameters content</div>',
           'section-filters': '<div class="filters-content">Filters content</div>',
@@ -421,7 +405,7 @@ describe('AppSidebar', () => {
 
     it('should not render section slots for inactive view', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'results' },
+        props: { spec: { panels: samplePanels }, activeView: 'results' },
         slots: {
           'section-parameters': '<div class="params-content">Parameters content</div>',
           'section-display': '<div class="display-content">Display content</div>',
@@ -436,7 +420,7 @@ describe('AppSidebar', () => {
     it('renders compact controls without prebuilt sidebar bindings', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          controls: sampleControls,
+          spec: { controls: defineControlModel({ controls: sampleControls }) },
           activeView: 'analysis',
         },
       })
@@ -448,10 +432,22 @@ describe('AppSidebar', () => {
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.05')
     })
 
+    it('should keep the generated form schema when the spec changes but the control model does not', async () => {
+      const controls = defineControlModel({ controls: sampleControls })
+      const wrapper = mount(AppSidebar, {
+        props: { spec: { controls }, activeView: 'analysis' },
+      })
+      const before = wrapper.findComponent(FormSchemaInternal).props('schema')
+
+      await wrapper.setProps({ spec: { controls, title: 'Parameters' } })
+
+      expect(wrapper.findComponent(FormSchemaInternal).props('schema')).toBe(before)
+    })
+
     it('defaults to the first generated control view when activeView is omitted', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          controls: sampleControls,
+          spec: { controls: defineControlModel({ controls: sampleControls }) },
         },
       })
 
@@ -492,8 +488,8 @@ describe('AppSidebar', () => {
       })
       const wrapper = mount(AppSidebar, {
         props: {
-          model,
-          modelValue: { threshold: '0.25' },
+          spec: { controls: model },
+          values: { threshold: '0.25' },
         },
       })
 
@@ -505,52 +501,16 @@ describe('AppSidebar', () => {
 
       await wrapper.find('input').setValue('0.5')
 
-      expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
         threshold: '0.5',
         method: 'linear',
       })
     })
 
-    it('uses initialValues from a complete control model binding', () => {
-      const model = defineControlModel({
-        initialValues: {
-          threshold: '0.25',
-          method: 'logistic',
-        },
-        views: {
-          setup: {
-            label: 'Setup',
-            sections: {
-              parameters: {
-                label: 'Parameters',
-                controls: {
-                  threshold: { label: 'Threshold', default: '0.05' },
-                  method: { label: 'Method', default: 'linear', options: ['linear', 'logistic'] },
-                },
-              },
-            },
-          },
-        },
-      })
-      const wrapper = mount(AppSidebar, {
-        props: {
-          model,
-          controlOptions: {
-            initialValues: {
-              method: 'linear',
-            },
-          },
-        },
-      })
-
-      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
-      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
-    })
-
     it('merges compact control defaults into section form updates', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          controls: sampleControls,
+          spec: { controls: defineControlModel({ controls: sampleControls }) },
           activeView: 'analysis',
           values: { untouched: 'keep' },
         },
@@ -572,12 +532,11 @@ describe('AppSidebar', () => {
         props: workspace.sidebar,
       })
 
-      expect(wrapper.props('modelValue')).toBe(workspace.values)
       expect(wrapper.props('values')).toBe(workspace.values)
 
       await wrapper.find('input').setValue('0.5')
       expect(workspace.values.threshold).toBe('0.5')
-      expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toMatchObject({
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
         threshold: '0.5',
       })
 
@@ -599,7 +558,7 @@ describe('AppSidebar', () => {
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
 
       await wrapper.setProps({
-        controls: sampleControls,
+        spec: { controls: defineControlModel({ controls: sampleControls }) },
       })
 
       const cards = wrapper.findAll('.mint-sidebar__group')
@@ -612,13 +571,15 @@ describe('AppSidebar', () => {
     it('lets explicit panels override compact control panel metadata by section', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          controls: sampleControls,
-          activeView: 'analysis',
-          panels: {
-            analysis: [
-              { id: 'parameters', label: 'Manual Parameters' },
-            ],
+          spec: {
+            panels: {
+              analysis: [
+                { id: 'parameters', label: 'Manual Parameters' },
+              ],
+            },
+            controls: defineControlModel({ controls: sampleControls }),
           },
+          activeView: 'analysis',
         },
       })
 
@@ -631,9 +592,8 @@ describe('AppSidebar', () => {
     it('renders FormBuilder schemas when a section has no custom slot', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, forms: sampleForms },
           activeView: 'analysis',
-          forms: sampleForms,
           values: { threshold: '0.25' },
         },
       })
@@ -643,17 +603,19 @@ describe('AppSidebar', () => {
       expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
     })
 
-    it('uses controlOptions initialValues for generated section forms', async () => {
+    it('uses the control model initialValues for generated section forms', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          controls: sampleControls,
-          activeView: 'analysis',
-          controlOptions: {
-            initialValues: {
-              threshold: '0.35',
-              method: 'logistic',
-            },
+          spec: {
+            controls: defineControlModel({
+              controls: sampleControls,
+              initialValues: {
+                threshold: '0.35',
+                method: 'logistic',
+              },
+            }),
           },
+          activeView: 'analysis',
         },
       })
 
@@ -669,55 +631,47 @@ describe('AppSidebar', () => {
       })
     })
 
-    it('can show FormBuilder actions for generated forms', () => {
+    it('applies the control model enhancements to the section forms', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: {
+            controls: defineControlModel({
+              controls: sampleControls,
+              enhancements: { fields: { method: { options: () => ['linear', 'quadratic'] } } },
+            }),
+          },
           activeView: 'analysis',
-          forms: sampleForms,
-          showFormActions: true,
         },
       })
 
-      expect(wrapper.find('.mint-form-actions').exists()).toBe(true)
+      expect(wrapper.findAll('option').map(option => option.text())).toContain('quadratic')
     })
 
-    it('merges section form updates into shared values', async () => {
+    it('shows the action bar of a section form that sets actions', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: {
+            panels: samplePanels,
+            forms: { parameters: { ...sampleForms.parameters, actions: true } as FormSchema },
+          },
           activeView: 'analysis',
-          forms: sampleForms,
-          values: { threshold: '0.25', untouched: 'keep' },
         },
       })
 
-      await wrapper.find('input').setValue('0.5')
-
-      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toEqual({
-        threshold: '0.5',
-        untouched: 'keep',
-      })
+      expect(wrapper.find('.mint-form-actions').exists()).toBe(true)
     })
 
-    it('supports default v-model for generated section form values', async () => {
+    it('merges section form updates into shared values', async () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, forms: sampleForms },
           activeView: 'analysis',
-          forms: sampleForms,
-          modelValue: { threshold: '0.25', untouched: 'keep' },
+          values: { threshold: '0.25', untouched: 'keep' },
         },
       })
 
-      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
-
       await wrapper.find('input').setValue('0.5')
 
-      expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual({
-        threshold: '0.5',
-        untouched: 'keep',
-      })
       expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toEqual({
         threshold: '0.5',
         untouched: 'keep',
@@ -727,9 +681,8 @@ describe('AppSidebar', () => {
     it('keeps explicit section slots as the override for generated forms', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          panels: samplePanels,
+          spec: { panels: samplePanels, forms: sampleForms },
           activeView: 'analysis',
-          forms: sampleForms,
         },
         slots: {
           'section-parameters': '<div class="manual-controls">Manual controls</div>',
@@ -755,7 +708,7 @@ describe('AppSidebar', () => {
 
     it('should render header slot', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
         slots: {
           header: '<div class="custom-header">Header</div>',
         },
@@ -766,7 +719,7 @@ describe('AppSidebar', () => {
 
     it('should render footer slot', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
         slots: {
           footer: '<div class="custom-footer">Footer</div>',
         },
@@ -777,14 +730,14 @@ describe('AppSidebar', () => {
 
     it('should not render header when slot is not provided', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       expect(wrapper.find('.mint-sidebar__header').exists()).toBe(false)
     })
 
     it('should not render footer when slot is not provided', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
       })
       expect(wrapper.find('.mint-sidebar__footer').exists()).toBe(false)
     })
@@ -793,21 +746,21 @@ describe('AppSidebar', () => {
   describe('edge cases', () => {
     it('should handle empty panels object', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: {}, activeView: 'analysis' },
+        props: { spec: { panels: {} }, activeView: 'analysis' },
       })
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
     })
 
     it('should handle view with empty sections array', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: { empty: [] }, activeView: 'empty' },
+        props: { spec: { panels: { empty: [] } }, activeView: 'empty' },
       })
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
     })
 
     it('uses the first non-empty panel view when activeView is omitted', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels },
+        props: { spec: { panels: samplePanels } },
       })
       expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
       expect(wrapper.findAll('.mint-sidebar__group')).toHaveLength(2)
@@ -819,8 +772,7 @@ describe('AppSidebar', () => {
     it('should apply multiple classes correctly', () => {
       const wrapper = mount(AppSidebar, {
         props: {
-          side: 'left',
-          floating: false,
+          spec: { floating: false, position: 'left' },
         },
       })
 
@@ -831,7 +783,7 @@ describe('AppSidebar', () => {
 
     it('should render all slots with sections', () => {
       const wrapper = mount(AppSidebar, {
-        props: { panels: samplePanels, activeView: 'analysis' },
+        props: { spec: { panels: samplePanels }, activeView: 'analysis' },
         slots: {
           header: '<div class="header">Header</div>',
           footer: '<div class="footer">Footer</div>',

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

@@ -26,7 +26,7 @@ describe('AppToastContainer', () => {
   it('renders toasts from the shared toast queue', async () => {
     const wrapper = mountContainer()
 
-    toast.success('Analysis complete', 10000)
+    toast.success('Analysis complete', { duration: 10000 })
     await nextTick()
 
     expect(wrapper.find('.mint-toast__item--success').exists()).toBe(true)
@@ -39,7 +39,7 @@ describe('AppToastContainer', () => {
 
   it('renders message-only toasts as the title (back-compat)', async () => {
     const wrapper = mountContainer()
-    toast.info('Saved', 10000)
+    toast.info('Saved', { duration: 10000 })
     await nextTick()
 
     expect(wrapper.find('.mint-toast__title').text()).toBe('Saved')