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

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

@@ -0,0 +1,857 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AppSidebar from '../../components/AppSidebar.vue'
+import CollapsibleCard from '../../components/CollapsibleCard.vue'
+import type { SidebarToolSection } from '../../types'
+import type { FormSchema } from '../../types/form-builder'
+import {
+  defineControlModel,
+  useControlSchema,
+  useControlWorkspace,
+  type ControlSchema,
+} from '../../composables/useControlSchema'
+
+const samplePanels: Record<string, SidebarToolSection[]> = {
+  analysis: [
+    { id: 'parameters', label: 'Parameters', icon: '⚙' },
+    { id: 'filters', label: 'Filters', icon: '🔍', defaultOpen: false },
+  ],
+  results: [
+    { id: 'display', label: 'Display Options' },
+  ],
+}
+
+const sampleForms: Record<string, FormSchema> = {
+  parameters: {
+    sections: [
+      {
+        id: 'parameters',
+        title: '',
+        fields: [
+          { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.05' },
+        ],
+      },
+    ],
+  },
+}
+
+const sampleControls: ControlSchema = {
+  threshold: {
+    label: 'Threshold',
+    default: '0.05',
+    section: 'parameters',
+    sectionLabel: 'Parameters',
+    view: 'analysis',
+  },
+  method: {
+    label: 'Method',
+    default: 'linear',
+    options: ['linear', 'logistic'],
+    section: 'parameters',
+    view: 'analysis',
+  },
+  saveResults: {
+    label: 'Save results',
+    default: true,
+    section: 'output',
+    sectionLabel: 'Output',
+    view: 'analysis',
+    sidebar: { defaultOpen: false },
+  },
+}
+
+describe('AppSidebar', () => {
+  describe('rendering with default props', () => {
+    it('should render sidebar with default classes', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mint-sidebar').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--left').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
+    })
+
+    it('should apply default width', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { 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' },
+      })
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
+    })
+
+    it('should be hidden when activeView is empty', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('side prop', () => {
+    it('should default to left side', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mint-sidebar--left').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--right').exists()).toBe(false)
+    })
+
+    it('should apply right side class', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { side: 'right' },
+      })
+      expect(wrapper.find('.mint-sidebar--right').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--left').exists()).toBe(false)
+    })
+  })
+
+  describe('floating prop', () => {
+    it('should apply floating class by default', () => {
+      const wrapper = mount(AppSidebar)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(false)
+    })
+
+    it('should apply static class when floating is false', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { floating: false },
+      })
+      expect(wrapper.find('.mint-sidebar--static').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar--floating').exists()).toBe(false)
+    })
+  })
+
+  describe('width prop', () => {
+    it('should apply custom width', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          width: '300px',
+        },
+      })
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 300px')
+    })
+
+    it('should handle different CSS units', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          width: '20rem',
+        },
+      })
+      expect(wrapper.find('.mint-sidebar').attributes('style')).toContain('width: 20rem')
+    })
+  })
+
+  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 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',
+              },
+            ],
+          },
+          activeView: 'analysis',
+          collapsible: true,
+          collapsed: true,
+        },
+      })
+
+      expect(wrapper.find('.mint-sidebar__rail-item').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__rail-svg').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__rail-badge').text()).toBe('2')
+      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 () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          collapsible: true,
+          defaultCollapsed: true,
+        },
+      })
+
+      await wrapper.get('.mint-sidebar__rail-item').trigger('click')
+      expect(wrapper.emitted('update:collapsed')).toEqual([[false]])
+    })
+
+    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, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+    })
+
+    it('should render CollapsibleCard for each section', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+    })
+
+    it('should pass section label as title to CollapsibleCard', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[1].props('title')).toBe('Filters')
+    })
+
+    it('should pass section icon to CollapsibleCard', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('icon')).toBe('⚙')
+    })
+
+    it('passes section badges and actions to CollapsibleCard 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' }],
+              },
+            ],
+          },
+          activeView: 'analysis',
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const card = wrapper.findComponent(CollapsibleCard)
+      expect(card.props('badge')).toBe(4)
+      expect(card.props('badgeTone')).toBe('cta')
+
+      await card.vm.$emit('action', 'reset')
+      expect(wrapper.emitted('section-action')).toEqual([['filters', 'reset']])
+    })
+
+    it('should respect defaultOpen on sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards[0].props('defaultOpen')).toBe(true)
+      expect(cards[1].props('defaultOpen')).toBe(false)
+    })
+
+    it('should switch sections when activeView changes', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+
+      await wrapper.setProps({ activeView: 'results' })
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
+    })
+
+    it('should hide when switching to view with no panels', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+      })
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+
+      await wrapper.setProps({ activeView: 'settings' })
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
+    })
+  })
+
+  describe('section slots', () => {
+    it('should render named section slots', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="params-content">Parameters content</div>',
+          'section-filters': '<div class="filters-content">Filters content</div>',
+        },
+      })
+      expect(wrapper.find('.params-content').exists()).toBe(true)
+      expect(wrapper.find('.filters-content').exists()).toBe(true)
+    })
+
+    it('should not render section slots for inactive view', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'results' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="params-content">Parameters content</div>',
+          'section-display': '<div class="display-content">Display content</div>',
+        },
+      })
+      expect(wrapper.find('.params-content').exists()).toBe(false)
+      expect(wrapper.find('.display-content').exists()).toBe(true)
+    })
+  })
+
+  describe('auto-rendered section forms', () => {
+    it('renders compact controls without prebuilt sidebar bindings', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+          activeView: 'analysis',
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect(cards[1].props('title')).toBe('Output')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.05')
+    })
+
+    it('defaults to the first generated control view when activeView is omitted', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Parameters')
+    })
+
+    it('accepts the full useControlSchema sidebar binding without activeView', () => {
+      const toolkit = useControlSchema(sampleControls)
+      const wrapper = mount(AppSidebar, {
+        props: toolkit.sidebar,
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+      expect(wrapper.attributes('viewids')).toBeUndefined()
+      expect(wrapper.attributes('defaultview')).toBeUndefined()
+    })
+
+    it('renders forms from a complete control model binding', async () => {
+      const model = defineControlModel({
+        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,
+          modelValue: { threshold: '0.25' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(1)
+      expect(wrapper.findComponent(CollapsibleCard).props('title')).toBe('Parameters')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:modelValue')?.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',
+            },
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      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,
+          activeView: 'analysis',
+          values: { untouched: 'keep' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+        threshold: '0.5',
+        method: 'linear',
+        saveResults: true,
+        untouched: 'keep',
+      })
+    })
+
+    it('works with direct useControlWorkspace sidebar bindings', async () => {
+      const workspace = useControlWorkspace(sampleControls)
+      const wrapper = mount(AppSidebar, {
+        props: workspace.sidebar,
+        global: { components: { CollapsibleCard } },
+      })
+
+      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({
+        threshold: '0.5',
+      })
+
+      workspace.setValues({ method: 'logistic' })
+      await wrapper.vm.$nextTick()
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+    })
+
+    it('activates generated panels and forms when direct controls load after mount', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          activeView: 'analysis',
+          values: {
+            threshold: '0.25',
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(true)
+
+      await wrapper.setProps({
+        controls: sampleControls,
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Parameters')
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('linear')
+    })
+
+    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' },
+            ],
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      const cards = wrapper.findAllComponents(CollapsibleCard)
+      expect(cards).toHaveLength(2)
+      expect(cards[0].props('title')).toBe('Manual Parameters')
+      expect(cards[1].props('title')).toBe('Output')
+    })
+
+    it('renders FormBuilder schemas when a section has no custom slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          values: { threshold: '0.25' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-form-builder').exists()).toBe(true)
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
+      expect(wrapper.find('.mint-form-actions').exists()).toBe(false)
+    })
+
+    it('uses controlOptions initialValues for generated section forms', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          controls: sampleControls,
+          activeView: 'analysis',
+          controlOptions: {
+            initialValues: {
+              threshold: '0.35',
+              method: 'logistic',
+            },
+          },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.35')
+      expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toMatchObject({
+        threshold: '0.5',
+        method: 'logistic',
+        saveResults: true,
+      })
+    })
+
+    it('can show FormBuilder actions for generated forms', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          showFormActions: true,
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      expect(wrapper.find('.mint-form-actions').exists()).toBe(true)
+    })
+
+    it('merges section form updates into shared values', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          values: { threshold: '0.25', untouched: 'keep' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      await wrapper.find('input').setValue('0.5')
+
+      expect(wrapper.emitted('update:values')?.at(-1)?.[0]).toEqual({
+        threshold: '0.5',
+        untouched: 'keep',
+      })
+    })
+
+    it('supports default v-model for generated section form values', async () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+          modelValue: { threshold: '0.25', untouched: 'keep' },
+        },
+        global: { components: { CollapsibleCard } },
+      })
+
+      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',
+      })
+    })
+
+    it('keeps explicit section slots as the override for generated forms', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          panels: samplePanels,
+          activeView: 'analysis',
+          forms: sampleForms,
+        },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          'section-parameters': '<div class="manual-controls">Manual controls</div>',
+        },
+      })
+
+      expect(wrapper.find('.manual-controls').exists()).toBe(true)
+      expect(wrapper.find('.mint-form-builder').exists()).toBe(false)
+    })
+  })
+
+  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' },
+        slots: {
+          header: '<div class="custom-header">Header</div>',
+        },
+      })
+      expect(wrapper.find('.mint-sidebar__header').exists()).toBe(true)
+      expect(wrapper.find('.custom-header').text()).toBe('Header')
+    })
+
+    it('should render footer slot', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        slots: {
+          footer: '<div class="custom-footer">Footer</div>',
+        },
+      })
+      expect(wrapper.find('.mint-sidebar__footer').exists()).toBe(true)
+      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
+    })
+
+    it('should not render header when slot is not provided', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { 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' },
+      })
+      expect(wrapper.find('.mint-sidebar__footer').exists()).toBe(false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty panels object', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { 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' },
+      })
+      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 },
+      })
+      expect(wrapper.find('.mint-sidebar--hidden').exists()).toBe(false)
+      expect(wrapper.findAllComponents(CollapsibleCard)).toHaveLength(2)
+      expect(wrapper.find('.mint-sidebar__sections').exists()).toBe(true)
+    })
+  })
+
+  describe('integration: multiple classes', () => {
+    it('should apply multiple classes correctly', () => {
+      const wrapper = mount(AppSidebar, {
+        props: {
+          side: 'left',
+          floating: false,
+        },
+      })
+
+      const sidebar = wrapper.find('.mint-sidebar')
+      expect(sidebar.classes()).toContain('mint-sidebar--left')
+      expect(sidebar.classes()).toContain('mint-sidebar--static')
+    })
+
+    it('should render all slots with sections', () => {
+      const wrapper = mount(AppSidebar, {
+        props: { panels: samplePanels, activeView: 'analysis' },
+        global: { components: { CollapsibleCard } },
+        slots: {
+          header: '<div class="header">Header</div>',
+          footer: '<div class="footer">Footer</div>',
+          'section-parameters': '<div>Params</div>',
+        },
+      })
+
+      expect(wrapper.find('.header').exists()).toBe(true)
+      expect(wrapper.find('.footer').exists()).toBe(true)
+      expect(wrapper.find('.mint-sidebar__sections').exists()).toBe(true)
+    })
+  })
+})